Свойство stroke задает цвет внешней линии указанного графического элемента.
Свойства fill и stroke указывают внешний и внутренний цвет элемента.
Вы можете найти веб-цвета в нашем разделе цвета HTML.
| Значение по умолчанию | none |
| Применяется | К формам и элементам с текстовым контентом. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | SVG 1.1 Specification |
| DOM Syntax | Object.stroke = "#1c87c9"; |
Синтаксис
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h2>Пример свойства stroke</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="#666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Рассмотрим другой пример со свойством stroke:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h2>Пример свойства stroke</h2>
<svg viewBox="5 5 100 100">
<style>
path {
fill: none;
stroke-width: 3px;
marker: url(#diamond);
}
</style>
<path d="M 10,50 v -20 h 40 v -20" stroke="#666"/>
<path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42"/>
<path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9"/>
<marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
markerUnits="userSpaceOnUse">
<circle cx="6" cy="6" r="3"
fill="#000" stroke="#ccc" stroke-width="1,5"/>
</marker>
</svg>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| none | Никакая расцветка не применяется. |
| color | Устанавливает сплошной цвет. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). |
| url | URL-ссылка для добавления расцветки серверного элемента. |
| context-fill | Использует значение fill из контекстного элемента. |
| context-stroke | Использует значение stroke из контекстного элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |