如何根据角度指定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).

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

Answer 1

SVG 只允许以绝对坐标指定梯度变换旋转原点。您将需要使用 JavaScript 动态设置旋转原点，以便执行我认为您想要执行的操作：即旋转渐变，但还要使颜色停止点均匀分布在包含框中。