CSS свойство stroke

Свойство 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	Значение элемента наследуется от родительского элемента.