5

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

4

1 回答 1

10

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

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

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

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

于 2012-12-20T18:49:06.113 回答