SVG线性渐变填充不透明度渐变

问题描述

我一直在阅读SVG规范，试图找出您是否可以同时具有填充和不透明度渐变，但是填充和不透明度处于不同角度?

I've been reading the SVG specification and trying to find out whether you can have a combined fill and opacity gradient, but with the fill and opacity at different angles?

请参见以下示例:

<linearGradient id="MyFill" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#FF0000" />
    <stop offset="100%" stop-color="#0000FF" />
</linearGradient>

<linearGradient id="MyTransparency" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-opacity="0%" x1="50%" x2="50%" />
    <stop offset="100%" stop-opacity="100%" x1="50%" x2="50%" />
</linearGradient>

不透明度定义为与填充不同的角度，如何将它们合并为一个填充?或者，如果不能，该如何将其应用于单个对象?

The opacity is defined at a different angle to the fill, how can I combine these into one fill? Or if I can't, how can I apply this to a single object?

推荐答案

SVG 1.1不支持该解决方案，但是您可以使用诸如过滤器标记的方法来解决此问题，以组合渐变(示例)，或<use>以相同的方式对同一元素应用不同的渐变，或编写脚本自己进行颜色插值.

It's not supported in SVG 1.1, but you can probably do a workaround with e.g filter markup to combine the gradients (an example), or <use> to apply different gradients to the same element that way, or write a script to do the color interpolation yourself.

这篇关于SVG线性渐变填充不透明度渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！