Question

我搜索过但找不到这个问题的答案。假设我在SVG中定义了一个渐变，例如：

<linearGradient id="myCustomGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="80%" style="stop-color: #4D4D94;" />
    <stop offset="100%" style="stop-color: #FFFFFF;" />
</linearGradient>

我可以通过执行以下操作在形状中使用它：

<rect x="0" y="0" width="100" height="50" style="fill: url(#myCustomGradient)" />

...这将创建一个矩形，其顶部为蓝色，底部为白色。

现在，假设我想生成一个具有相同渐变但形状相反的形状（即从底部的蓝色到顶部的白色））。 是否可以重复使用现有的渐变定义，但能以某种方式转换（即翻转）？

我知道gradientTransform属性，但这似乎只适用于定义新渐变。

Answer 1

当然，你创建另一个渐变并将它和xlink：href放到你的第一个渐变上。 E.g。

<linearGradient id="myCustomRotatedGradient" xlink:href="#myCustomGradient" gradientTransform="rotate(180, 150, 25)"/>

您未设置的任何属性都使用引用渐变中的属性。如果您没有设置任何停靠点，那么也会使用引用的渐变停止。

如果你想翻转它，scaleTransform of scale（-1）可能效果更好。

SVG：重用现有的渐变定义，但旋转/翻转它

1 个答案: