SVG Градієнти - Лінійний

SVG Градієнти

Градієнт - це плавний перехід від одного кольору до іншого. Крім того, до одного елемента можна застосувати декілька переходів кольорів.

У SVG є два основних типи градієнтів:

• Лінійний
• Радіальний

SVG Лінійний градієнт - <linearGradient>

Елемент <linearGradient> використовується для визначення лінійного градієнта.

Елемент <linearGradient> має бути вкладений у тег <defs>. Тег <defs> є скороченням від definitions і містить визначення спеціальних елементів (таких як градієнти).

Лінійні градієнти можна визначити як горизонтальні, вертикальні або кутові градієнти:

• Горизонтальні градієнти створюються, коли y1 та y2 рівні, а x1 та x2 відрізняються
• Вертикальні градієнти створюються, коли x1 та x2 рівні, а y1 та y2 відрізняються
• Кутові градієнти створюються, коли x1 та x2 відрізняються, а y1 та y2 відрізняються

Приклад 1

Визначте еліпс із горизонтальним лінійним градієнтом від жовтого до червоного:

Ось код SVG:

Пояснення прикладу:

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

Приклад 2

Визначте еліпс з вертикальним лінійним градієнтом від жовтого до червоного:

Ось код SVG:

Приклад 3

Визначте еліпс із горизонтальним лінійним градієнтом від жовтого до червоного та додайте текст усередині еліпса:

Ось код SVG:

Пояснення коду:

• Елемент <text> використовується для додавання тексту