Свойство CSS stroke-width
Свойство CSS stroke-width задаёт ширину обводки элемента.
CSS stroke-width переопределяет атрибут презентации SVG. Например, правило CSS имеет приоритет над stroke-width="3" в разметке. Инлайн-стили также переопределяют атрибуты презентации.
INFO
Атрибут stroke-width является атрибутом презентации и может применяться к любому элементу, но влияет только на следующие элементы: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> и <tspan>.
INFO
Единицы измерения, такие как px или em, обязательны, за исключением случая, когда значение равно 0.
| Начальное значение | 1 |
|---|---|
| Применяется к | Фигурам и элементам текстового содержимого. |
| Наследуется | Да. |
| Анимация | Да. |
| Версия | Спецификация SVG 1.1 |
| Синтаксис DOM | Object.strokeWidth = "0.5"; |
Синтаксис
Синтаксис CSS stroke-width
stroke-width: length | percentage | initial | inherit;Пример свойства 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 со значением "%":
Пример значения в процентах для 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 | Наследует свойство от родительского элемента. |
Практика
Что делает CSS-свойство 'stroke-width'?