SVG-градиенты — линейные

SVG-градиенты

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

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

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

Линейный градиент SVG — <linearGradient>

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

Элемент <linearGradient> должен быть вложен в тег <defs>. Тег <defs> является сокращением от определений и содержит определение специальных элементов (таких как градиенты).

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

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

Пример 1

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

Вот SVG-код:

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

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

Пример 2

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

Вот SVG-код:

Пример 3

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

Вот SVG-код:

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

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