Линейные градиенты SVG

SVG градиент

Градиент представляет собой平滑ый переход от одного цвета к другому. Кроме того, можно применить несколько цветовых переходов к одному элементу.

В SVG есть два основных типа градиентов:

  • Линейный градиент
  • Радиальный градиент

SVG линейный градиент - <linearGradient>

<linearGradient> Элемент используется для определения линейного градиента.

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

Линейный градиент может быть определен как горизонтальный, вертикальный или градиент поворота:

  • Создание горизонтального градиента, когда y1 и y2 равны, а x1 и x2 не равны
  • Создание вертикального градиента, когда x1 и x2 равны, а y1 и y2 не равны
  • Создание градиентного поворота, когда x1 и x2 различаются, а y1 и y2 не равны

Пример 1

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

Это код SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Попробуйте сами

Объяснение кода:

  • Атрибут id тега <linearGradient> определяет уникальное имя градиента
  • Атрибуты x1, x2, y1, y2 тега <linearGradient> определяют начало и конец градиента
  • Цветовая гамма градиента может состоять из двух или более цветов. Каждому цвету соответствует маркер <stop>
  • Атрибут offset используется для определения начала и конца цвета градиента
  • Атрибут fill свяжет элемент эллипса с градиентом

Пример 2

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

Это код SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Попробуйте сами

Пример 3

Определяет эллипс и добавляет текст в его пределах, у него есть горизонтальный линейный градиент от желтого к красному:

SVG

Это код SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Попробуйте сами

Объяснение кода:

  • Элемент <text> используется для добавления текста