stroke
stroke-width
stroke-opacity
stroke-linecap
stroke-linejoin
stroke-dasharray
stroke-dashoffset
У фигур могут быть контуры (или обводка). Контуры могут быть разных стилей. Изучим их. Контуры применимы к линиям, прямоугольника, кругам и т.д.
В качестве обводки можно задавать none, цвета (в т.ч. именованные), ключевые слова (currentColor и transparent), а также градиенты и паттерны.
Атрибут stroke отвечает за цвет обводки. Значения по умолчанию нет.
<svg width="200" height="200">
<rect width="160" height="160" x="20" y="20"
fill="none"
stroke="maroon"/>
</svg>
Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.
<svg width="200" height="200">
<rect width="160" height="160" x="20" y="20"
fill="none"
stroke="maroon"
stroke-width="10" />
</svg>
Прозрачность обводки. Задаются значения от 0.0 до 1.0.
<svg width="200" height="200">
<g class="g-circles" fill="none"
stroke-width="15">
<circle r="40" cx="60" cy="60"
stroke="crimson"
stroke-opacity=".7"/>
<circle r="55" cx="100" cy="100"
stroke="orangered"
stroke-opacity=".5" />
<circle r="40" cx="140" cy="140"
stroke="gold"
stroke-opacity=".25"/>
</g>
</svg>
Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.
<!-- ... -->
<use xlink:href="#s-path" stroke="orangered" y="20"
stroke-linecap="butt"/>
<use xlink:href="#s-path" stroke="olivedrab" y="85"
stroke-linecap="round"/>
<use xlink:href="#s-path" stroke="steelblue" y="150"
stroke-linecap="square"/>
<!-- ... -->
Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.
<!-- ... -->
<use xlink:href="#s-corner" stroke="orangered" y="0"
stroke-linejoin="miter"/>
<use xlink:href="#s-corner" stroke="olivedrab" y="80"
stroke-linejoin="round"/>
<use xlink:href="#s-corner" stroke="steelblue" y="160"
stroke-linejoin="bevel"/>
<!-- ... -->
Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.
Значения указываются в порядке dash и gap (пунктир и промежуток); безразмерные числа считаются пикселями. Хотя значения могут быть указаны любыми единицами измерения. Создадим линию:
<svg viewBox="0 0 300 10">
<line x1="0" y1="0" x2="300" y2="0"
stroke="black" stroke-width="10" stroke-dasharray="5" />
</svg>
Применим два значения.
stroke-dasharray="5, 10"
А если три? Если задано странное значение, то оно будет повторяться, чтобы получился повторяющийся узор. Т.е. значение 5, 10, 5 будут описывать следующее: «черточка 5, разрыв 10, черточка 5, разрыв 5, черточка 10, разрыв 5»
stroke-dasharray="5, 10, 5"
Обводка для круга
See the Pen SVG stroke made from beads by yoksel (@yoksel) on CodePen.
Используя обводку и простые фигуры можно получить удивительные вещи:
See the Pen SVG-patterns by yoksel (@yoksel) on CodePen.
Атрибут stroke-dashoffset позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0.
В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:
<svg width="270" height="270">
<g class="g-circles" fill="none"
stroke-width="15"
stroke-dasharray="25% 110%"
transform="rotate(72 135 135)">
<circle r="115" cx="135" cy="135"
stroke="crimson"/> <!-- Красная обводка без смещения -->
<circle r="115" cx="135" cy="135"
stroke="orangered"
stroke-dashoffset="25%"/> <!-- Оранжевая обводка смещена на 25% -->
<circle r="115" cx="135" cy="135"
stroke="gold"
stroke-dashoffset="50%"/> <!-- Желтая обводка смещена на 50% -->
</g>
</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>
SVG-линии при помощи CSS также можно заставить двигаться. Если значения stroke-dashoffset и stroke-dasharray равны и совпадают с длинной линии, то видимый конец линии можно заставить двигаться. Анимировать линию можно, изменяя во времени значение stroke-dashoffset до 0:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 10">
<style type="text/css">
@keyframes strokeanim {
to { stroke-dashoffset: 0; }
}
line#dashstart {
stroke: royalblue;
stroke-width: 15;
stroke-dasharray: 300;
stroke-dashoffset: 300 ;
animation: strokeanim 2s alternate infinite;
}
</style>
<line id="dashstart" x1="0" y1="0" x2="300" y2="0"></line>
</svg>
Применим контур к прямоугольнику.
<svg xmlns="http://www.w3.org/2000/svg" with="300" height="200" viewBox="0 0 300 200">
<style type="text/css">
rect#strokedrect {
stroke: green;
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
}
</style>
<rect id="strokedrect" x="0" y="0" width="300" height="200" />
</svg>
Контур рисуется посередине заданного пути. Если фигура прозрачна или рисуется на однородном поле, то смотрится нормально. Но если прямоугольник сделать цветным и меньшего размера чем viewBox, то можно увидеть, как в реальности рисуется контур.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" with="300" height="200">
<style type="text/css">
rect#strokedrect2 {
stroke: green;
fill: grey;
stroke-width: 12;
stroke-dasharray: 10;
}
</style>
<rect id="strokedrect2" x="20" y="20" width="260" height="160" />
</svg>
Также можно анимировать контур у прямоугольника:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" with="300" height="200">
<style type="text/css">
@keyframes marchingants {
to { stroke-dashoffset: 19; }
}
rect#strokedrect3 {
stroke: hsl(260, 50%, 90%);
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
animation: marchingants 1s forwards infinite linear;
}
</style>
<rect id="strokedrect3" x="0" y="0" width="300" height="200" />
</svg>
Рассмотрим подробнее, как работает анимация в контурах.
У вас есть SVG-файл. Он должен иметь элемент stroke. Контур должен быть пунктирным. Зададим нужное свойство через CSS. Длина пунктира должна быть достаточно большой.
.path {
stroke-dasharray: 100;
}
<svg ...>
<path class="path" stroke="#000000" ... >
</svg>
Устанавливаем смещение контура через stroke-dashoffset. Подключаем анимацию, которая будет убирать смещение. Если установить достаточно большие значения для двух свойств у контура, то получим сплошной контур, который будет двигаться.
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Значение forwards запустит анимацию один раз. Для бесконечной анимации применяем infinite.
Возьмём для опыта котёнка с замечательного сайта ikonka.ru.
<svg ...>
<defs>
<style>
.path {
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<g id="Document" fill="none" stroke="black" font-family="Times New Roman" font-size="16" transform="scale(1 -1)">
<g id="Spread" transform="translate(0 -75)">
<g id="Layer 1">
<path class="path" d="M 44.352,10.251 ..." stroke="darkorange" fill="none" stroke-width="0.5" />
</g>
</g>
</g>
</svg>
В примере величина stroke-dasharray подбиралась на глазок. Чтобы не угадывать нужное значение, можно воспользоваться JavaScript.
var path = document.querySelector('.path');
var length = path.getTotalLength();
Идея How SVG Line Animation Works | CSS-Tricks">отсюда.
По такому же принципу работает и новогодняя ёлка. Для красоты мы её разукрасим в разные цвета. Праздник к нам приходит!
See the Pen Christmas tree by tehnolog (@tehnolog) on CodePen.
Ещё один эффект анимации.
Вернуться в раздел SVG