SVG Обводка
Изучите свойства SVG stroke с запускаемыми примерами: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset и другие.
Стилизация контуров SVG с помощью свойств stroke
Stroke (обводка) SVG-элемента — это краска, наносимая вдоль контура фигуры, линии или текста, в отличие от fill (заливки), которая закрашивает внутреннюю область. SVG предоставляет семейство свойств stroke-*, управляющих всеми аспектами контура: его цветом, толщиной, прозрачностью, формой концов, способом соединения углов, а также тем, является ли он сплошным или пунктирным.
Эти свойства являются атрибутами представления, поэтому их можно задавать как непосредственно на элементе (stroke="purple"), так и через CSS (stroke: purple;). Они также наследуются, поэтому их часто задают один раз на элементе <g> (группе) и дочерние фигуры подхватывают их автоматически.
В этой главе рассматривается полный набор свойств stroke. Информацию о фигурах, которые вы будете обводить, см. в разделах SVG Path, SVG Line и SVG Text. Если вы только начинаете знакомство с SVG, начните с Введения в SVG, а для быстрого поиска любого атрибута держите под рукой Справочник SVG.
Свойства stroke в кратком обзоре:
stroke— цвет (или иная краска) контура.stroke-width— толщина контура.stroke-opacity— прозрачность обводки: от0до1.stroke-linecap— форма, рисуемая на открытых концах линии:butt,roundилиsquare.stroke-linejoin— форма в местах соединения двух сегментов линии:miter,roundилиbevel.stroke-miterlimit— максимальная длина углаmiterперед откатом кbevel.stroke-dasharray— шаблон чередования штрихов и промежутков пунктирного контура.stroke-dashoffset— смещение начала шаблона штрихов вдоль пути.
Свойство stroke
Свойство stroke задаёт цвет контура. Оно принимает любое значение цвета CSS — именованный цвет, hex-код, rgb(), hsl() или ссылку на градиент или паттерн. По умолчанию фигуры не имеют обводки (none), поэтому ничего не рисуется, пока вы её не зададите.
В примере ниже на группу установлено fill="none", чтобы были видны только контуры, а каждый путь обведён разным цветом.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
Sorry, your browser doesn't support inline SVG.
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Текст "Sorry, your browser doesn't support inline SVG." является резервным содержимым. Он должен быть прямым текстовым дочерним элементом <svg>, чтобы браузер без поддержки встроенного SVG отображал его вместо графики. Современные браузеры игнорируют его и отрисовывают SVG.
Свойство stroke-width
Свойство stroke-width задаёт толщину контура. Обводка рисуется по центру пути, поэтому половина её ширины располагается с каждой стороны геометрической линии.
Число без единиц интерпретируется в пользовательских единицах (система координат SVG) — stroke-width="5" и stroke-width="5px" эквивалентны в обычном SVG. Можно также использовать явные единицы CSS (px, em, pt) или процент, который вычисляется относительно диагонали viewport SVG, а не его ширины или высоты.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Свойство stroke-opacity
Свойство stroke-opacity управляет прозрачностью только обводки, независимо от прозрачности заливки. Оно принимает число от 0 (полностью прозрачный) до 1 (полностью непрозрачный); значение 0.5 делает обводку полупрозрачной. Это полезно при наложении контуров или когда нужно, чтобы фон просвечивал сквозь контур, не затрагивая заливку фигуры.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="purple" stroke-width="8">
<path stroke-opacity="1" d="M5 30 l215 0" />
<path stroke-opacity="0.5" d="M5 60 l215 0" />
<path stroke-opacity="0.2" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Свойство stroke-linecap
Свойство stroke-linecap определяет форму, рисуемую на открытых концах обведённого пути. Оно принимает три значения:
butt(по умолчанию) — обводка заканчивается точно в конечной точке пути с ровным краем и без продления. Нарисованная длина равна геометрической длине пути.round— в каждом конце добавляется полукруг с радиусом, равным половине ширины обводки, поэтому линия выходит за конечную точку наstroke-width / 2и завершается плавной кривой.square— добавляется плоский колпачок, выходящий за конечную точку наstroke-width / 2. Выглядит какbutt, но длиннее; дополнительная длина с каждого конца такая же, как уround, только с плоским краем вместо закруглённого.
Разница наиболее заметна при толстой обводке. Обратите внимание, что линии round и square ниже кажутся немного длиннее линии butt, хотя все три пути имеют одинаковые координаты.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Свойство stroke-linejoin
Свойство stroke-linejoin определяет форму в местах соединения двух сегментов пути — в углах. Оно принимает три распространённых значения:
miter(по умолчанию) — внешние края двух сегментов продлеваются до пересечения в острой точке.round— угол скругляется дугой.bevel— угол срезается с плоским краем.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="orange" stroke-width="12">
<path stroke-linejoin="miter" d="M15 90 L40 20 L65 90" />
<path stroke-linejoin="round" d="M105 90 L130 20 L155 90" />
<path stroke-linejoin="bevel" d="M185 90 L210 20 L235 90" />
</g>
</svg>
</body>
</html>Свойство stroke-miterlimit
Когда stroke-linejoin равно miter, очень острые углы могут образовывать чрезвычайно длинные, острые выступы. Свойство stroke-miterlimit ограничивает максимальную длину такого выступа. Оно задаёт максимально допустимое соотношение длины среза к ширине обводки, где длина среза — это расстояние от внутреннего угла до внешнего кончика выступа. Если соотношение для соединения превышает лимит, это соединение автоматически переключается на bevel.
Значение по умолчанию — 4, то есть выступ может растягиваться не более чем в четыре раза ширины обводки (это сохраняет острый угол для любого угла поворота около 29° или шире). Чем острее угол, тем длиннее выступ, поэтому чем меньше лимит, тем при большем угле углы начинают скашиваться. Значение 1 скашивает почти каждый угол, не являющийся прямой линией; большое значение, например 10, пропускает даже очень острые выступы. Значение должно быть не менее 1.
В примере ниже оба пути образуют одинаковый острый пик, но левый (stroke-miterlimit="1") принудительно скашивается, а правый (stroke-miterlimit="10") сохраняет острый угол.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="purple" stroke-width="10" stroke-linejoin="miter">
<path stroke-miterlimit="1" d="M20 100 L45 25 L70 100" />
<path stroke-miterlimit="10" d="M120 100 L145 25 L170 100" />
</g>
</svg>
</body>
</html>Свойство stroke-dasharray
Свойство stroke-dasharray превращает сплошной контур в пунктирный. Его значение — разделённый запятыми или пробелами список чисел, описывающих длины штрихов и промежутков, которые применяются поочерёдно вдоль пути:
- Одно значение, например
stroke-dasharray="10", создаёт штрихи и промежутки равной длины (10,10). - Два значения, например
stroke-dasharray="3,5", означают штрих длиной3единицы, за которым следует промежуток длиной5единиц, и так по кругу. - При чётном количестве значений список используется как есть и повторяется.
Если задано нечётное количество значений, SVG повторяет список дважды, чтобы сделать его чётным, поэтому роли штрихов и промежутков чередуются. Например, stroke-dasharray="30,15,10,10,10,15" читается как шаблон: штрих 30, промежуток 15, штрих 10, промежуток 10, штрих 10, промежуток 15, и затем цикл повторяется.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Свойство stroke-dashoffset
Свойство stroke-dashoffset смещает начало шаблона штрихов вдоль пути. Значение 0 (по умолчанию) начинает шаблон в начальной точке пути; положительное значение сдвигает начальную точку вперёд по пути, а отрицательное — назад. Именно это позволяет анимировать эффекты «марширующих муравьёв» или рисования линий путём постепенного изменения смещения.
В примере ниже все три линии используют одинаковый шаблон штрихов, но начинают его с разных смещений, поэтому штрихи выглядят сдвинутыми относительно друг друга.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen" stroke-width="5" stroke-dasharray="20,10">
<path stroke-dashoffset="0" d="M5 30 l215 0" />
<path stroke-dashoffset="10" d="M5 60 l215 0" />
<path stroke-dashoffset="20" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Анимация с помощью stroke-dashoffset
Поскольку смещение можно анимировать, stroke-dashoffset является основой для двух популярных эффектов:
- Марширующие муравьи — анимируйте смещение на один полный период штриха, чтобы штрихи казались ползущими по контуру (как рамка выделения).
- Рисование линии — установите
stroke-dasharrayравным общей длине пути, чтобы весь путь стал одним длинным штрихом, затем анимируйте смещение от этой длины до0, и линия будет казаться рисующейся сама по себе.
CSS ниже создаёт эффект марширующих муравьёв. Анимация выполняется от смещения 0 до 30 (длина одного цикла штрих+промежуток 15,15), что делает петлю бесшовной:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ants {
stroke: purple;
stroke-width: 3;
fill: none;
stroke-dasharray: 15, 15;
animation: march 1s linear infinite;
}
@keyframes march {
to {
stroke-dashoffset: 30;
}
}
</style>
</head>
<body>
<svg width="220" height="120">
<rect class="ants" x="10" y="10" width="200" height="100" />
</svg>
</body>
</html>Чтобы рисовать целые фигуры таким способом, см. SVG Path и SVG Line; полный список атрибутов stroke находится в Справочнике SVG.