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

【问题标题】：SVG: Reuse existing gradient definition, but rotate/flip itSVG：重用现有的渐变定义，但旋转/翻转它
【发布时间】：2012-12-08 06:43:05
【问题描述】：

我已经搜索过，但找不到这个问题的答案。假设我在 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 属性，但这似乎只适用于定义新渐变。

【问题讨论】：

标签： svg gradient

【解决方案1】：

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

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

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

如果你想翻转它， scale(-1) 的 gradientTransform 可能会更好。

【讨论】：

所以你真的必须为每个想要使用它的形状创建一个新的渐变定义吗？这似乎效率低下。但是也许xlink:href 协议允许在后台重用？想象一个页面有 1000 个元素分布在视口中，每个元素都有一个渐变。每个梯度之间的唯一区别是梯度坐标系的 x,y 偏移；为每个实例实例化一个新的渐变似乎有点矫枉过正。
是的，所以，我阅读了xlink:href 并且所有属性和子元素（例如<stop>s）都是继承的，如the docs 中所述，在“渐变元素”下。就像你说的那样。我发现<use> 在这种情况下不起作用，它必须是<linearGradient> 和xlink:href。我想这利用了 SVG 内在的可重用性，虽然它需要一个新元素，但它仍然很有效。