CSS-свойство stroke
Как использовать CSS-свойство stroke для отрисовки контура элемента. Описание свойства и примеры значений.
CSS-свойство stroke рисует контур (линию) SVG-фигуры или фрагмента текста. Если fill закрашивает внутреннюю часть фигуры, то stroke закрашивает её границу — вместе они определяют, как отображается каждый путь, окружность, прямоугольник и текстовый элемент SVG.
На этой странице описано, что делает stroke, какие значения он принимает, как взаимодействует со связанными свойствами обводки (ширина, пунктир, концы линий) и какие ошибки встречаются чаще всего.
Когда его использовать?
stroke влияет только на SVG-контент — для обычных HTML-элементов, таких как <div> или <p>, оно не работает. Используйте его, когда вы:
- рисуете иконки, графики или диаграммы с помощью встроенного
<svg>; - анимируете линию, которая «рисует себя сама» (сочетайте
strokeсstroke-dasharrayиstroke-dashoffset); - обводите SVG-текст без его заливки.
Список именованных веб-цветов можно найти в разделе цветов HTML.
CSS-свойство или атрибут представления
stroke необычно тем, что его можно задать и как CSS-свойство, и как атрибут представления SVG, написанный непосредственно в теге элемента. Следующие две строки дают одинаковый результат:
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Если используются оба способа, побеждает CSS: встроенный style (или любое правило таблицы стилей) перекрывает атрибут представления. Это позволяет задать цвет по умолчанию в разметке и переопределять его через CSS — например, при наведении.
Свойство stroke можно использовать как CSS-свойство, так и как атрибут представления. Оно применимо к любому элементу, но оказывает эффект только на следующие: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> и <tspan>.
| Начальное значение | none |
|---|---|
| Применяется к | Фигурам и текстовым элементам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | Спецификация SVG 1.1 |
| DOM-синтаксис | Object.stroke = "#1c87c9"; |
Синтаксис
Синтаксис CSS stroke
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Пример использования свойства stroke:
Пример кода CSS stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Результат
Пример с фигурами и CSS
Свойство stroke необязательно писать как атрибут — здесь оно задаётся из блока <style> и применяется сразу к нескольким фигурам. Обратите внимание на fill: none, чтобы отображался только контур:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| none | Обводка не применяется. |
| color | Задаёт сплошной цвет. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). |
| url | Ссылка URL на элемент-сервер закраски, определяющий способ закраски. |
| context-fill | Использует значение fill из контекстного элемента. |
| context-stroke | Использует значение stroke из контекстного элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Начальное значение — none, то есть фигура без stroke рисуется без контура вообще — даже если stroke-width задан.
Связанные свойства обводки
stroke задаёт только цвет контура. Чтобы управлять его внешним видом, сочетайте его с:
stroke-width— толщина линии;stroke-dasharray— паттерн штриховки вместо сплошной линии;stroke-dashoffset— начальная точка паттерна штриховки (ключ к анимациям рисования);stroke-linecap— форма концов линии.
Частые ошибки
- Ничего не отображается. Если
stroke-widthравен0(значение по умолчанию), контур невидим независимо от цвета. Всегда задавайте ширину. - Фигура залита. Если нужен только контур, установите
fill: none— иначе внутренняя часть по умолчанию закрашивается чёрным. - Не работает на
<div>.strokeдействует только на SVG-графику и текстовые элементы:<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>и<tspan>.