Понятие линейных градиентов в SVG

Понятие линейных градиентов в SVG

От автора: CSS градиенты уже стали обычным делом для большинства веб-дизайнеров, в то время как у SVG градиентов есть свои преимущества. Если вы собираетесь использовать SVG элементы, вам нужно понять принцип работы градиентов.

Почти родственники

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

<linearGradient id="testbed">
    <stop stop-color="salmon" offset="0" />
    <stop stop-color="aliceblue" offset="1" />
</linearGradient>

По умолчанию такой градиент не видно. Для его отображения мы должны создать SVG документ с элементом, который будет ссылаться на градиент через его id. Градиент обычно помещают в секцию <defs>:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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. Разметка прямоугольника в таком случае изменится на:

<rect x="0" y="0" width="100" height="33" />

И CSS:

rect {
    fill: url(#testbed);
}

Я предпочту использовать метод на CSS, так как он более гибкий, но вы можете выбрать и SVG.

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

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

<linearGradient id="testbed2">
    <stop stop-color="red" offset="0.5" />
    <stop stop-color="blue" offset="0.5" />
</linearGradient>

Прозрачность

С другой стороны, мы можем создать компоненты цвета с определенным уровнем прозрачности при помощи атрибута stop-opacity:

<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%:

<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 градиентами.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree