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

Question

这是 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 以及像这样插入 header 的 cy 和 r 找到了解决方案：

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

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

但是，我想问一下有没有其他更简单的方法呢？因为我需要在代码中使它动态化，我们可以获得任何类型的维度。样板太多。

如有任何帮助，我们将不胜感激。

谢谢！！

Answer 1

您需要添加 gradientUnits="userSpaceOnUse"。在这种情况下，百分比是相对于父 svg 元素的。

<svg viewBox="0 0 420 200" >
  <radialGradient id="gradient1" cx="50%" cy="50%" r="20%" spreadMethod="reflect" gradientUnits="userSpaceOnUse">
    <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="350"  height="150" fill="url(#gradient1)" />
</svg>

Answer 2

经过多次尝试，我确信除了使用 gradientTransform 别无他法。这是因为我们在 space 中有不止一种形状。如果我只有一种形状，那么使用 gradientUnits="userSpaceOnUse"

更符合逻辑

希望这对某人有所帮助。

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

How to keep SVG radialGradient to be perfect circle in any rectangle without using gradientTransform?

html

svg

radial-gradients