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

我已经找过了，但找不到这个问题的答案。假设我在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

属性，但这似乎仅在定义新渐变时适用。

当然，您可以创建另一个渐变，并将其和xlink:href指定给您的第一个渐变。例如

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

任何未设置的属性都将使用引用的渐变中的属性。如果未设置任何停止点，则也将使用引用的渐变停止点

---

如果要翻转它，缩放的gradientTransform（-1）可能会更好。

那么您真的必须为每个要使用它的形状创建一个新的渐变定义吗？这似乎效率低下。但是，也许

xlink:href

协议允许在引擎盖下重用？想象一下，一个页面上有1000个元素分布在整个视口中，每个元素都有一个渐变。每个渐变的唯一区别是渐变坐标系的x、y偏移；为每一个元素实例化一个新的渐变似乎有些过头了。是的，因此，我阅读了

xlink:href

，所有属性和子元素（例如

s）都是继承的，如“渐变元素”下所述。就像你说的。我发现

在这种情况下不起作用，它必须是带有

xlink:href

的

。我想这充分利用了SVG的内在可重用性，虽然它需要一个新元素，但仍然是有效的。