Свойство stroke-width указывает толщину контура элемента.
Единицы измерения "px" или "em" не требуются.
| Значение по умолчанию | 1 |
| Применяется | К формам и элементам с текстовым контентом. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | SVG 1.1 Specification |
| DOM синтаксис | Object.strokeWidth = "0.5"; |
Синтаксис
stroke-width: length | percentage | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h2>Пример свойства stroke-width</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9"
stroke-width="1" />
</svg>
</body>
</html>Рассмотрим другой пример со свойством stroke-width:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h2>Пример свойства stroke-width</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9"
stroke-width="3" />
</svg>
</body>
</html>В следующем примере толщина контура указана в процентах:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h2>Пример свойства stroke-width</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9"
stroke-width="2%" />
</svg>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| length | Указывает толщину контура. |
| percentage | Указывает толщину контура в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
What is true about the CSS property 'stroke-width'?
Правильный!
Неправильно!