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

Вот код 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", он становится таким:

введите здесь описание изображения



Я нашел решение, используя градиентную трансформацию, а также интерполируя cy и r заголовка следующим образом: 

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


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

введите здесь описание изображения

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

Любая помощь будет оценена по достоинству.

Спасибо!!


svg html radial-gradients
person Zenko    schedule 07.05.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно добавить 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>

person enxaneta    schedule 07.05.2020
comment
Спасибо. Я пробовал это, но мы не хотим, чтобы процент относился к родительскому элементу SVG, особенно когда у нас есть более нескольких прямоугольников в пространстве. Но это хороший ответ для одного прямоугольника. - person Zenko; 07.05.2020

arrow_upward
0
arrow_downward

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

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

person Zenko    schedule 12.05.2020