带不透明度渐变的 SVG 线性渐变填充答案

【问题标题】：SVG linear gradient fill with opacity gradient带不透明度渐变的 SVG 线性渐变填充
【发布时间】：2011-12-05 05:27:36
【问题描述】：

我一直在阅读 SVG 规范并试图找出是否可以组合填充和不透明度渐变，但填充和不透明度在不同的角度？

看下面的例子：

<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>

不透明度以与填充不同的角度定义，如何将它们组合成一个填充？或者如果我不能，我如何将其应用于单个对象？

【问题讨论】：

停止元素上的 x1 和 x2 根据 svg 规范无效，不会产生任何影响。

标签： svg opacity fill

【解决方案1】：

SVG 1.1 不支持它，但您可以使用过滤器标记来组合渐变 (an example) 或 <use> 以这种方式将不同渐变应用于同一元素，或者编写脚本自己做颜色插值。

【讨论】：