Как сохранить SVG radialGradient идеальным кругом в любом прямоугольнике без использования gradientTransform?

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, а также интерполировав cy и r заголовка следующим образом:

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

Это дает мне идеальный круг вроде этого:



Однако я хочу спросить, есть ли какой-либо другой более простой метод для этого? Потому что мне нужно будет сделать эту динамику c в коде, и мы можем получить любые измерения. Слишком много котельной пластины.

Любая помощь будет принята с благодарностью.

Спасибо !!

Answer 1

Опробовав многие вещи, я убедился, что нет другого пути, кроме как использовать gradientTransform. Это потому, что у нас есть более одной формы в пространстве. Если у меня только одна фигура, логичнее будет использовать gradientUnits = "userSpaceOnUse"

Надеюсь, это кому-то поможет.

Answer 2

Необходимо добавить 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>