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

我希望以完全复制CSS线性渐变行为的方式指定SVG线性渐变。例如，在CSS渐变中，可以指定渐变分别在框的左上角和右下角开始和结束。当长方体调整大小时，背景渐变将自动适应新的大小

在我的第一次尝试中，我使用SVG复制了CSS线性渐变，方法是指定一个角度，并根据框大小计算x1、y1、x2、y2坐标。但是，如果调整长方体的大小，渐变的角度不会改变，也不再正确。（我必须重新计算所有坐标）

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

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

现在，这适用于大小为（300100）的长方体，但您将看到，我必须为旋转中心（150,50）指定绝对值

---

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

SVG只允许渐变变换旋转原点。您需要使用JavaScript动态设置旋转原点，以便执行我认为您希望执行的操作：即旋转渐变，但也要使颜色停止点均匀分布在包含框中。

is gradientUnits=“objectBoundingBox”gradientTransform=“rotate（-45 0.5 0.5）”你在找什么？我想我已经试过了，因为我开始使用objectBoundingBox，但我会再试一次…我只是再试一次，但它不起作用。它所做的似乎是计算方形框上的旋转梯度，因此对于-45，它从一个角到另一个角。然后，它似乎会拉伸宽度，使渐变保持原样。如果长方体为100x100，则角度是正确的，但在我的示例中，角度最终是错误的。有趣的是，您在第一次尝试时指出，当在SVG中调整矩形的大小时，“渐变的角度不会改变”。这正是我想要做的，但我不太明白。你能分享你的代码吗？谢谢你的回复。我要做的就是模仿CSS的线性渐变。网络上的所有示例都使用根据边或角原点指定的渐变。这在svg中很容易模仿，如果调整框的大小，效果不会改变。根据角度指定的CSS梯度也可以通过计算x1、y1、x2、y2坐标或围绕中心旋转来模拟。调整长方体大小时会出现问题。要明确的是，你是说当框被调整大小时，必须重新计算坐标以保持与CSS渐变的一致性吗？