SVG Градиенты - Линейный

SVG Градиенты

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

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

• линейный
• радиальный

SVG Linear Gradient - <LinearGradient>

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

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

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

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

Пример 1

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

Вот код SVG:

Code explanation:

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

Пример 2

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

Вот код SVG:

Пример 3

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

Вот код SVG:

Code explanation:

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