如何通过角度指定SVG线性渐变

Question

我希望能够以与CSS线性渐变相同的方式指定SVG线性渐变。例如，在CSS渐变中，您可以指定渐变从一个框的左上角开始，到右下角结束。当框被调整大小时，背景渐变会自动适应新的大小。

在我的第一次尝试中，我通过指定角度并通过计算盒子大小来计算x1、y1、x2、y2坐标，从而使用SVG复制了CSS线性渐变。但是，如果调整框的大小，则渐变的角度不会改变，并且不再正确。（我必须重新计算所有坐标）。

我的下一次尝试是使用转换来旋转渐变。以下是一些代码：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
      gradientTransform="rotate(-45 150 50)">
    <stop stop-color="#FF0000" offset="0"/>
    <stop stop-color="#00FF00" offset="0.5"/>
    <stop stop-color="#0000FF" offset="1"/>
  </linearGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" />
</svg>

现在，这适用于尺寸为(300,100)的框，但您会发现我必须指定旋转中心的绝对值(150,50)。

我可以使用百分比来指定中心吗？最终，我希望渐变角度能够适应框的尺寸。

- Jules

---

你是否在寻找 gradientUnits="objectBoundingBox" gradientTransform="rotate(-45 0.5 0.5)"？ - Robert Longson

我想我已经尝试过了，因为我一开始使用的是objectBoundingBox，但我会再试一次... - Jules

我刚刚再次尝试了一下，但它还是不起作用。它似乎是在计算正方形盒子上的旋转梯度，因此对于-45，它会从一个角落到另一个角落。然后它似乎会拉伸宽度，保持梯度不变。如果盒子是100x100，则角度将是正确的，但在我的例子中，角度最终变得不正确。 - Jules

有趣的是，在你第一次尝试时，你提到了在SVG中调整矩形大小时，“梯度的角度没有改变”。这正是我想要做的，但我还无法完全弄清楚如何做到。你能分享一下你是如何实现这个的代码吗？ - Todd Main

Answer 1

SVG只允许使用绝对坐标指定渐变转换旋转原点。为了做到你想要的效果——旋转渐变并使颜色停靠点在包含框内均匀分布，你需要使用JavaScript动态设置旋转原点。请注意保留HTML标签。

- Michael Mullany

---

谢谢回复。我想做的是完全模仿CSS线性渐变效果。网络上的所有示例都使用以边缘或角落为起点的渐变方式进行指定。这在SVG中很容易模仿，并且无论盒子大小如何改变，效果都不会改变。通过计算x1、y1、x2、y2坐标或围绕中心旋转，也可以模仿以角度指定的CSS渐变。问题出现在盒子大小改变时。请明确一下，您是说当盒子大小改变时，必须重新计算坐标以保持与CSS渐变的一致性吗？ - Jules