SVG обведення

19

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

Базові атрибути

Зовнішній вигляд елемента path в SVG визначається областях (колір задається за допомогою будь-якої системи CSS кольорів) і її товщиною (в пікселях, SVG підтримується будь-яка CSS система вимірювань).

Рисочки

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

Отримаємо:

SVG обведення

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

line#simple {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5;
}

Якщо у атрибута stroke-dasharray задана пара значень, то друге число в кожній парі це розрив:

line {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5, 20;
}

SVG обведення

Якщо задано дивне значення, то воно буде повторюватися, щоб вийшов повторюваний візерунок. Тобто значення 5, 20, 5 дасть нам:

SVG обведення

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

Атрибут stroke-dashoffset

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

line#dashstart {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5, 20, 5;
stroke-dashoffset: 20;
}

SVG обведення

Це та ж сама лінія, що була трохи вище: просто з-за значення атрибута stroke-dashoffset шаблон лінії починається в іншій точці.

Анімовані лінії

SVG лінії за допомогою CSS також можна змусити рухатися. Якщо значення stroke-dashoffset і stroke-dasharray рівні і збігаються з довгої лінії, то видимий кінець лінії можна змусити рухатися. Анімувати це можна, змінюючи в часі значення stroke-dashoffset до 0:

@keyframes strokeanim {
to { stroke-dashoffset: 0; }
}
line#dashstart {
stroke: hsl(260, 50%, 30%);
stroke-width: 15;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: strokeanim 2s alternate infinite;
}

І ми отримаємо:

SVG обведення

Основна складність це точне визначення довжини лінії і відповідно встановлення правильних значень stroke-dasharray і stroke-dashoffset. Зазвичай це робиться через JavaScript… але про це я розповім в наступній статті.

Функція Variable Width Strokes?

SVG обведення

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

Інші способи застосування ліній

У цій статті ми досі використовували обведення в простих лініях, проте в SVG обведення можна використовувати для створення простих фігур, такі як полігон, полілінія і шлях. Приміром, дуже легко можна імітувати візуальний ефект виділення області, як в photoshop’е, за допомогою тега rect та вже вивченого CSS:

rect#strokedrect {
stroke: hsl(260, 50%, 3%);
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
}

І ми отримаємо:

SVG обведення

Зверніть увагу, що обведення завжди малюється посередині заданого шляху. У прикладах вище у нас з цим не виникало жодних проблем, так як елементи були одного розміру з контейнером viewBox і мали прозору заливку. Тим не менш, якщо одна з цих умов не дотримується, то виникає серйозна проблема. Приміром, якщо прямокутник знаходиться всередині viewBox, але він не прозорий, а кольоровий:

rect#oddstrokedrect {
stroke: hsl(260, 50%, 3%);
fill: grey;
stroke-width: 12;
stroke-dasharray: 15;
}

Ми отримаємо:

SVG обведення

Позиціонування обведення?

На даний момент в SVG не можна позиціонувати обведення (наприклад, не можна поставити «inside», «outside» або «middle»). Однак дана можливість анонсована в SVG2. Пам’ятайте, що в старих браузерах обведення позиціонується завжди по-різному. Також можна анімувати обведення:

@keyframes marchingants {
to { stroke-dashoffset: 19; }
}
rect#strokedrect {
stroke: hsl(260, 50%, 90%);
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
animation: marchingants 1s forwards infinite linear;
}

Що дасть нам:

SVG обведення

Висновок

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