Html 如何在不使用gradientTransform的情况下使SVG radialGradient在任何矩形中保持为完美圆？

以下是SVG代码：

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="gradient1" cx="50%" cy="50%" r="20%" spreadMethod="reflect">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>

 <rect x="0" y="0" width="150" height="150" fill="url(#gradient1)" />
</svg>

由于宽度和高度相同，因此图像如下所示：

但是当矩形变为width=“300”height=“150”时，它会变成这样：

我通过使用gradientTransform和插值标题的cy和r找到了一个解决方案，如下所示：

这给了我一个这样的完美圆：



但是，我想问一下，是否还有其他更简单的方法？因为我需要在代码中实现动态，我们可以得到任何类型的维度。锅炉板太多

任何帮助都将不胜感激

---

谢谢

您需要添加

gradientUnits=“userSpaceOnUse”

。在这种情况下，百分比是相对于父svg元素的

---

您需要添加

gradientUnits=“userSpaceOnUse”

。在这种情况下，百分比是相对于父svg元素的

---

在尝试了很多东西之后，我确信除了使用gradientTransform之外没有其他方法了。这是因为空间中有多个形状。如果我只有一个形状，那么使用gradientUnits=“userSpaceOnUse”更符合逻辑

---

希望这对别人有帮助

在尝试了很多东西之后，我确信除了使用gradientTransform之外没有其他方法了。这是因为空间中有多个形状。如果我只有一个形状，那么使用gradientUnits=“userSpaceOnUse”更符合逻辑

---

希望这对别人有帮助

多谢各位。我已经试过了，但我们不希望它与父SVG元素的百分比相关，特别是当空间中有多个矩形时。但对于单个矩形来说，这是一个很好的答案。谢谢。我已经试过了，但我们不希望它与父SVG元素的百分比相关，特别是当空间中有多个矩形时。但对于单个矩形来说，这是一个很好的答案。

<radialGradient id="gradient1"cx="50%" cy="25%" r="10%"
  spreadMethod="reflect" gradientTransform="scale(1.0, 2.0)">