Svg 直线径向

我有一个简单的直线半径在一个圆内

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <linearGradient id="ct-svg-gradient" gradientTransform="rotate(65)">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
  </linearGradient>

  <circle cx="100" cy="100" r="50" fill="url(#ct-svg-gradient)"/>
</svg>

我非常感谢您的任何回复或建议

---

事情并没有那么简单。为了使渐变从一条边到另一条边填充对象，还需要传入元素并考虑其边界框

如果您只需要担心圆，那么应用与轴对齐的渐变并旋转圆会更简单

---

事实上，我不仅担心圆，而且我关心的对象可以毫无问题地旋转。当对象不是很规则时，你很难展示一种从边到边填充对象的方法？你是否计划设置渐变旋转的动画？不。只是在加载页面之前配置了渐变角度。我用一个使用JS更新渐变的示例更新了我的答案。

function convert(angle_in_degrees) { // or radians, I'll take care of conversion

  // the algorithm I'm interested in

  return {
    x1: ...,
    y1: ...,
    x2: ...,
    y2: ...,
  };
}