SVG:重用现有的梯度定义，但旋转/翻转

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：HREF到您的第一个梯度。例如

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

您不设置的任何属性都使用引用梯度中的属性。如果您不设置任何停止，则也使用引用的梯度停止。

如果您想翻转它，则比例尺（-1）的渐变性可能更好。