От автора: CSS градиенты уже стали обычным делом для большинства веб-дизайнеров, в то время как у SVG градиентов есть свои преимущества. Если вы собираетесь использовать SVG элементы, вам нужно понять принцип работы градиентов.
Почти родственники
Градиенты в CSS и SVG, по существу, являются родственниками. Последняя спецификация CSS взяла некоторые хорошие идеи из спецификации SVG. Основная разница в том, что SVG, как и все другое в языках программирования, представляет градиент в виде разметки. Это делает градиенты в SVG более подробными, но также и более легкими для чтения и понимания. В SVG линейный градиент (градиент, который меняет свой цвет по прямой линии) можно создать с помощью кода:
|
1 2 3 4 |
<linearGradient id="testbed"> <stop stop-color="salmon" offset="0" /> <stop stop-color="aliceblue" offset="1" /> </linearGradient> |
По умолчанию такой градиент не видно. Для его отображения мы должны создать SVG документ с элементом, который будет ссылаться на градиент через его id. Градиент обычно помещают в секцию <defs>:
|
1 2 3 4 5 6 7 8 9 |
<svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" viewBox="0 0 100 50"> <defs> <linearGradient id="testbed1"> <stop stop-color="salmon" offset="0" /> <stop stop-color="aliceblue" offset="1" /> </linearGradient> </defs> <rect x="0" y="0" width="100" height="50" fill="url(#testbed1)" /> </svg> |
На данном этапе стоит отметить пару вещей:
По умолчанию градиенты идут слева направо, но это можно легко изменить. Ниже я покажу, как это сделать.
Элементы stop работают по принципу ограничителей градиента в Photoshop и других продуктах от Adobe.
Позиция смещения offset записывается от 0 до 1 или от 0% до 100% и указывает точку выхода цветов.
Цвета градиентов можно задавать через любую систему цветов в CSS.
fill также можно записать в чистом CSS. Разметка прямоугольника в таком случае изменится на:
|
1 |
<rect x="0" y="0" width="100" height="33" /> |
И CSS:
|
1 2 3 |
rect { fill: url(#testbed); } |
Я предпочту использовать метод на CSS, так как он более гибкий, но вы можете выбрать и SVG.
Четкие переходы
Градиент – это не обязательно плавный переход от одного цвета к другому. Если ограничители пододвинуть друг к другу достаточно близко, можно создать четкий переход:
|
1 2 3 4 |
<linearGradient id="testbed2"> <stop stop-color="red" offset="0.5" /> <stop stop-color="blue" offset="0.5" /> </linearGradient> |
Прозрачность
С другой стороны, мы можем создать компоненты цвета с определенным уровнем прозрачности при помощи атрибута stop-opacity:
|
1 2 3 4 5 |
<linearGradient id="testbed3"> <stop stop-color="yellow" offset="0" stop-opacity="0" /> <stop stop-color="blue" offset="0.5" /> <stop stop-color="black" offset="1" stop-opacity="0.5" /> </linearGradient> |
Использование CSS цветов с альфа компонентом для значений color-stop не даст того же эффекта в SVG.
Направленность
В отличие от углов в CSS, SVG градиент задает точки x1, y1, x2, и y2 для постановки направления линейного градиента. Точки точно такие же, как в SVG линиях.
Обратите внимание на то, что не всем атрибутам нужны значения для создания градиента, так как по умолчанию они уже заданы в 0 кроме точки x2, которая по умолчанию имеет значение 100%. Так мы получаем линейный SVG градиент с направлением слева направо. Поэтому чтобы создать диагональный градиент, необходимо точке y2 задать 100%:
|
1 2 3 4 5 |
<linearGradient id="testbed4" y2="100%"> <stop stop-color="yellow" offset="0" /> <stop stop-color="blue" offset="0.5" /> <stop stop-color="black" offset="1" /> </linearGradient> |
Так мы не получим градиент с наклоном в 45°, так как значения относительны размерам элемента и не имеют абсолютного позиционирования:
Конусные и сетчатые градиенты?
Как и в CSS, SVG на данный момент поддерживает только линейные и радиальные градиенты. Тем не менее, конусные градиенты (градиенты по дуге) были предложены для внесения в CSS, а сетчатые (градиенты в двумерных сетках с цветами, выходящими из каждой точки) запланированы в SVG2. У Ли Вероу есть замечательный полифил конусного градиента для CSS, который с помощью canvas и SVG генерирует нужную форму и цвет.
Другие способы
В SVG можно создавать повторяющиеся и отраженные градиенты. О них я расскажу в отдельных статьях, то же самое касается и радиальных градиентов (они будут темой следующей статьи).
Преимущества и заключение
У SVG градиентов есть несколько преимуществ. Все они относятся к анимации. CSS градиенты должны поддаваться анимации, но только пара браузеров поддерживают эту функцию на данный момент. SVG градиенты можно анимировать, как с помощью SMIL (кроме IE/Edge, которые никогда не поддерживали SMIL), так и JS. Кроме того, при создании SVG намного легче работать с SVG градиентами.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
