CSS свойство stroke-width
Как использовать CSS свойство stroke-width для задания толщины обводки SVG-фигур и текста. Синтаксис, значения и примеры.
CSS свойство stroke-width задаёт толщину контура («обводки»), рисуемого вокруг SVG-фигуры или текста. Обводка — это закрашенная линия, следующая по пути фигуры; stroke-width определяет, насколько эта линия толстая.
На этой странице рассматриваются синтаксис, допустимые значения (длины и проценты), взаимодействие stroke-width с атрибутами SVG-представления, а также особенности, связанные с единицами измерения и масштабированием через viewBox.
Зачем использовать stroke-width
В SVG контур и внутренняя область фигуры закрашиваются раздельно: свойство stroke закрашивает контур, а fill — внутреннюю область. Обводка видна только тогда, когда её ширина ненулевая, поэтому именно stroke-width делает контур видимым. Используйте его, чтобы делать рамки толще или тоньше, рисовать тонкие сетки или создавать жирные обведённые иконки и текст.
stroke-width и SVG-атрибут
Ширину обводки можно задать двумя способами: как атрибут SVG-представления в разметке (stroke-width="3") или как CSS-свойство. Когда присутствуют оба варианта, CSS побеждает — CSS-правило (или встроенный style) имеет приоритет над атрибутом представления. Именно поэтому значение, заданное в разметке SVG, может казаться «проигнорированным»: его перекрывает таблица стилей.
<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />Атрибут stroke-width является атрибутом представления и может применяться к любому элементу, однако оказывает эффект только на следующие элементы: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> и <tspan>.
Единицы измерения, такие как px или em, обязательны, кроме случая, когда значение равно 0.
| Начальное значение | 1 |
|---|---|
| Применяется к | Элементам-фигурам и текстовому содержимому. |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | SVG 1.1 Specification |
| DOM Синтаксис | Object.strokeWidth = "0.5"; |
Синтаксис
stroke-width: length | percentage | initial | inherit;Ширина отцентрирована по пути: половина рисуется внутри края фигуры, половина — снаружи. Таким образом, stroke-width равный 4 у окружности с радиусом 3 добавляет 2 единицы за пределы радиуса и перекрывает 2 единицы внутрь.
Пример свойства stroke-width:
Пример кода CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
</svg>
</body>
</html>Результат
Пример свойства stroke-width со значением «length»:
Ещё один пример кода CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
</svg>
</body>
</html>Пример свойства stroke-width со значением «%»:
Процентное значение вычисляется относительно диагонали SVG — конкретно диагонали viewport (sqrt(width² + height²) / sqrt(2)), а не размера самой фигуры. Это делает процентную ширину удобной, когда нужно, чтобы обводка масштабировалась вместе с рисунком.
Пример процентного значения CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
</svg>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| length | Задаёт ширину обводки. |
| percentage | Задаёт ширину обводки в %. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Замечания и особенности
- Нулевая ширина скрывает обводку.
stroke-width: 0ничего не рисует, даже если задан цветstroke. - Единицы обязательны для ненулевых CSS-значений. Внутри
style/таблицы стилей используйте2px,0.5emи т. д. Форма без единиц (stroke-width="3") допустима только как SVG-атрибут, где число интерпретируется в единицах пространства пользователя. - Обводка располагается по обе стороны пути. Поскольку половина ширины выходит за край фигуры, толстая обводка может выйти за пределы
viewBoxи обрезаться. Добавьте отступ вviewBox, если контур обрезается. - Она масштабируется вместе с
viewBox. Значениеstroke-widthв единицах пользователя растёт и уменьшается при масштабировании SVG под его контейнер. Чтобы сохранить постоянную экранную толщину вне зависимости от масштаба, добавьте SVG-атрибутvector-effect="non-scaling-stroke"к элементу.
Связанные свойства
stroke— цвет (заливка) контура.stroke-linecap— форма концов открытых путей.stroke-dasharray— превращает обводку в пунктирную линию.stroke-dashoffset— смещает начало паттерна штрихов.fill— цвет внутренней области фигуры.