SVG обводка

От автора: стрелки, пунктирные линии и черточки крайне полезны в диаграммах и иллюстрациях на SVG. Такие украшения можно создать в программах типа Adobe Illustrator и Inkscape, но также полезно знать, как делать их вручную. В этой статье я расскажу вам про SVG обводку.

Базовые атрибуты

Внешний вид элемента path в SVG определяется обводкой (цвет задается при помощи любой системы CSS цветов) и ее толщиной (в пикселях, в SVG поддерживается любая CSS система измерений).

Черточки

Обводка состоит из черточек, которые задаются при помощи атрибута stroke-dasharray. Значения указываются в порядке dash и gap; безразмерные числа считаются пикселями. Хотя значения могут быть указаны любыми единицами измерения, которые понимает SVG (самые распространенные — проценты). Если указано одно значение, то оно применяется и к пропускам и к пунктирам. Создадим линию:

Получим:

Такого же результата можно добиться и в CSS, переписав все значения атрибутов в стили:

Если у атрибута stroke-dasharray задана пара значений, то второе число в каждой паре это разрыв:

Если задано странное значение, то оно будет повторяться, чтобы получился повторяющийся узор. Т.е. значение 5, 20, 5 даст нам:

Если «прочитать» нашу линию слева направо, то значения атрибута stroke-dasharray будут описывать следующее: «черточка 5, разрыв 20, черточка 5, разрыв 5, черточка 20, разрыв 5».

Атрибут stroke-dashoffset

Атрибут stroke-dashoffset задает начало линии; начальная точка сдвигается вглубь линии:

Это та же самая линия, что была немного выше: просто из-за значения атрибута stroke-dashoffset шаблон линии начинается в другой точке.

Анимированные линии

SVG линии при помощи CSS также можно заставить двигаться. Если значения stroke-dashoffset и stroke-dasharray равны и совпадают с длинной линии, то видимый конец линии можно заставить двигаться. Анимировать это можно, изменяя во времени значение stroke-dashoffset до 0:

И мы получим:

Основная сложность это точное определение длины линии и соответственно установка правильных значений stroke-dasharray и stroke-dashoffset. Обычно это делается через JavaScript… но об этом, я расскажу в следующей статье.

Функция Variable Width Strokes?

Применение данной функции можно часто встретить в иллюстрациях и каллиграфии: как изменится цветная линия, если вы смените угол обзора, рисуя кистью chisel-edge. К сожалению variable width strokes не поддерживается на данный момент в SVG (есть догадки, что данная функция будет включена в SVG 2). Сейчас же можно сделать только замкнутую линию без обводки.

Другие способы применения линий

В этой статье мы до сих пор использовали обводку в простых линиях, однако в SVG обводку можно использовать для создания простых фигур, такие как полигон, полилиния и путь. К примеру, очень легко можно имитировать визуальный эффект выделения области, как в PhotoShop’е, при помощи тега rect и уже изученного CSS:

И мы получим:

Обратите внимание, что обводка всегда рисуется посередине заданного пути. В примерах выше у нас с этим не возникало никаких проблем, так как элементы были одного размера с контейнером viewBox и имели прозрачную заливку. Тем не менее, если одно из этих условий не соблюдается, то возникает серьезная проблема. К примеру, если прямоугольник находится внутри viewBox, но он не прозрачный, а цветной:

Мы получим:

Позиционирование обводки?

На данный момент в SVG нельзя позиционировать обводку (к примеру, нельзя задать “inside”, “outside” или “middle”). Однако данная возможность анонсирована в SVG2. Помните, что в старых браузерах обводка позиционируется всегда по-разному. Также можно анимировать обводку:

Что даст нам:

Заключение

Как я говорил в начале статьи, существует намного больше способов применения обводки и маркеров SVG. Все эти способы я рассмотрю в следующей статье.

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

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

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