SVG обводка

SVG обводка

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

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

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

Черточки

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

<svg viewBox="0 0 300 10">
    <line x1="0" y1="0" x2="300" y2="0" 
	stroke="black" stroke-width="10"  stroke-dasharray="5" />
</svg>

Получим:

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

<svg viewBox="0 0 300 10">
    <style type="text/css">
        line#simple {
            stroke: black;
            stroke-width: 5;
            stroke-dasharray: 5;
        }
    </style>
    <line id="simple" x1="0" y1="0" x2="300" y2="0" />
</svg>

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

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

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

Если «прочитать» нашу линию слева направо, то значения атрибута 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;
}

Это та же самая линия, что была немного выше: просто из-за значения атрибута 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;
}

И мы получим:

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

Функция Variable Width Strokes?

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<style type="text/css">
rect#strokedrect {
    stroke: hsl(260, 50%, 3%);
    fill: white;
    stroke-width: 7;
    stroke-dasharray: 10;
}
</style>
    <rect id="strokedrect" x="0" y="0" width="300" height="200" />
</svg>

И мы получим:

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<style type="text/css">
rect#oddstrokedrect {
    stroke: hsl(260, 50%, 3%);
    fill: grey;
    stroke-width: 12;
    stroke-dasharray: 15;
}
</style>
    <rect id="oddstrokedrect" x="20" y="20" width="260" height="160" />
</svg>

Мы получим:

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<style type="text/css">
@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;
}
</style>
    <rect id="strokedrect" x="0" y="0" width="300" height="200" />
</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