Поняття лінійних градієнтів в SVG

37

Від автора: CSS градієнти вже стали звичною справою для більшості веб-дизайнерів, в той час як у SVG градієнтів є свої переваги. Якщо ви збираєтеся використовувати SVG елементи, вам потрібно зрозуміти принцип роботи градієнтів.

Майже родичі

Градієнти в CSS і SVG, по суті, є родичами. Остання специфікація CSS взяла деякі хороші ідеї специфікації SVG. Основна різниця в тому, що SVG, як і все інше в мовах програмування, являє градієнт у вигляді розмітки. Це робить градієнти в SVG більш докладними, але також і більш легкими для читання і розуміння. В SVG лінійний градієнт градієнт, який змінює свій колір по прямій лінії) можна створити за допомогою коду:

За замовчуванням такий градієнт не видно. Для його відображення ми повинні створити SVG документ з елементом, який буде посилатися на градієнт через його id. Градієнт зазвичай поміщають в секцію :

На даному етапі варто відзначити пару речей:

За замовчуванням градієнти йдуть зліва направо, але це можна легко змінити. Нижче я покажу, як це зробити.

Елементи stop працюють за принципом обмежувачів градієнта в Photoshop та інші продукти від Adobe.

Позиція зміщення нуля записується від 0 до 1 або від 0% до 100% та вказує точку виходу квітів.

Кольори градієнтів можна задавати через будь-яку систему кольорів в CSS.

fill також можна записати в чистому CSS. Розмітка прямокутника в такому разі зміниться на:

І CSS:

rect {
fill: url(#testbed);
}

Я волію використовувати метод на CSS, так як він більш гнучкий, але ви можете вибрати і SVG.

Чіткі переходи

Градієнт – це не обов’язково плавний перехід від одного кольору до іншого. Якщо обмежувачі підсунути один до одного досить близько, можна створити чіткий перехід:

Прозорість

З іншого боку, ми можемо створити компоненти кольору з певним рівнем прозорості за допомогою атрибута stop-opacity:

Використання CSS квітів з альфа компонентом для значень color-stop не дасть того ж ефекту в SVG.

Спрямованість

На відміну від кутів в CSS, SVG градієнт задає точки x1, y1, x2, y2 для постановки напрямку лінійного градієнта. Точки точно такі ж, як в SVG лініях.

Зверніть увагу на те, що не всім атрибутам потрібні значення для створення градієнта, так як за замовчуванням вони вже задані в 0 крім точки x2, яка за замовчуванням має значення 100%. Так ми отримуємо лінійний SVG градієнт з напрямком зліва направо. Тому щоб створити діагональний градієнт, необхідно точці y2 задати 100%:

Так ми не отримаємо градієнт з нахилом 45°, так як значення відносні розмірами елемента і не мають абсолютного позиціонування:

Конусні і сітчасті градієнти?

Як і в CSS, SVG на даний момент підтримує тільки лінійні і радіальні градієнти. Тим не менш, конусні градієнти (градієнти по дузі) були запропоновані для внесення в CSS, а сітчасті (градієнти в двовимірних таблицях з квітами, що виходять з кожної точки) заплановані в SVG2. В Вероу є чудовий полифил конусного градієнта для CSS, який з допомогою canvas і SVG генерує потрібну форму і колір.

Інші способи

В SVG можна створювати повторювані і відбиті градієнти. Про них я розповім в окремих статтях, те ж саме стосується і радіальних градієнтів (вони будуть темою наступної статті).

Переваги та висновок

У SVG градієнтів є кілька переваг. Всі вони відносяться до анімації. CSS градієнти повинні піддаватися анімації, але тільки пара браузерів підтримують цю функцію на даний момент. SVG градієнти можна анімувати, як SMIL (крім IE/Edge, які ніколи не підтримували SMIL), так і JS. Крім того, при створенні SVG набагато легше працювати з SVG градієнтами.