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）。

我可以用百分比来指定中心吗？最后，我希望渐变的角度适应盒子的尺寸。

Answer 1

SVG仅允许渐变变换旋转原点为specified in terms of absolute coordinates。您需要使用JavaScript动态设置旋转原点，以便执行我认为您要执行的操作：旋转渐变，同时使颜色停止在包含框内均匀分布。

如何根据角度指定svg线性渐变

1 个答案: