Радиальные градиенты SVG

Радиальный градиент SVG - <radialGradient>

<radialGradient> Элементы используются для определения радиальных градиентов (радиальных градиентов).

<radialGradient> Элементы должны быть вложены в <defs> внутри тега.<defs> Элемент definitions является аббревиатурой для определения специальных элементов (например, фильтров).

Пример 1

Определите эллипс с радиальным градиентом от белого к синему:

Это код SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />

</svg>

Комментарий к коду:

  • Атрибут id в теге <radialGradient> определяет уникальное имя градиента
  • Атрибуты cx, cy и r определяют внешнюю окружность, а fx и fy - внутреннюю
  • Интервал цветов градиента может состоять из двух или более цветов. Каждому цвету соответствует метка <stop>
  • Атрибут offset используется для определения начала и конца градиента цвета
  • Атрибут fill свяжет элемент эллипса с градиентом

Пример 2

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

Это код SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />

</svg>