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

【问题标题】：How to specify svg linear gradient in terms of an angle如何根据角度指定 svg 线性渐变
【发布时间】：2012-03-15 03:27:06
【问题描述】：

我想以完全复制 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>

现在，这适用于大小为 (300,100) 的盒子，但您会看到我必须指定旋转中心 (150,50) 的绝对值。

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

【问题讨论】：

是 gradientUnits="objectBoundingBox" gradientTransform="rotate(-45 0.5 0.5)" 你在找什么？
我想我已经尝试过了，因为我开始使用 objectBoundingBox 但我会再试一次......
我刚刚又试了一次，还是不行。它似乎做的是计算方形盒子上的旋转梯度，所以对于 -45，它从一个角到另一个角。然后它似乎拉伸了宽度，使渐变保持原样。如果盒子是 100x100，那么角度是正确的，但在我的示例中，角度最终是错误的。
有趣的是，当您在 SVG 中调整矩形大小时，您在第一次尝试时表示“渐变的角度不会改变”。这正是我想要做的，但无法完全弄清楚。你能分享你的代码吗？

标签： css svg gradient

【解决方案1】：

SVG 只允许渐变变换旋转原点为specified in terms of absolute coordinates。您需要使用 JavaScript 动态设置旋转原点，以便执行我认为您想要做的事情：旋转渐变，但还要让颜色停止在包含框内均匀分布。

【讨论】：

感谢您的回复。我正在尝试做的是完全模仿 CSS 线性渐变。网络上的所有示例都使用根据边或角原点指定的渐变。这在 svg 中很容易模仿，并且如果调整框的大小，效果不会改变。也可以通过计算 x1,y1,x2,y2 坐标或绕中心旋转来模拟以角度指定的 CSS 渐变。调整框大小时会出现此问题。明确地说，您是说在调整框大小时必须重新计算坐标以保持与 CSS 渐变的奇偶性？