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放到你的第一个渐变上.例如

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

您未设置的任何属性都使用引用渐变中的属性.如果未设置任何停止,则也使用引用的渐变停止.

如果你想翻转它,scaleTransform of scale(-1)可能会更好.