css - 如何根据 Angular 指定 svg 线性渐变

Question

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

在我的第一次尝试中，我通过指定 Angular 并根据框大小计算 x1、y1、x2、y2 坐标，用 SVG 复制了 CSS 线性渐变。但是如果调整框的大小，渐变的 Angular 不会改变并且不再正确。 (我将不得不重新计算所有坐标)。

我的下一个尝试是使用变换来旋转渐变。这是一些代码:

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

我可以用百分比来指定中心吗？最后我想让渐变的 Angular 适应盒子的尺寸。

Answer 1

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