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属性，但这似乎只适用于定义新的渐变。

- FixMaker

Answer 1

可以的，你可以创建另一个渐变并给它一个 xlink:href 属性来引用你的第一个渐变。例如：

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

如果您没有设置某些属性，则使用引用渐变中的属性。如果您不设置任何停止点，则也将使用引用渐变的停止点。

如果您希望翻转它，则scale（-1）的gradientTransform可能效果更好。

- Robert Longson

---

那么每个想要使用它的形状都必须创建一个新的渐变定义吗？这似乎效率低下。但也许 xlink:href 协议在幕后允许重用？想象一下，一个页面上有 1000 个分布在视口中的元素，每个元素都有一个渐变。每个渐变之间唯一的区别是渐变坐标系的 x、y 偏移；为每个实例化一个新的渐变似乎过度杀伤力了。 - ericsoco

是的，我研究了xlink:href以及所有属性和子元素（例如<stop>）都是继承的，正如文档中所述，“渐变元素”。就像你说的一样。我发现在这种情况下<use>不起作用，必须使用带有xlink:href的<linearGradient>。我想这利用了SVG的内在可重用性，虽然需要一个新元素，但仍然很高效。 - ericsoco