CSS свойство stroke

Свойство stroke рисует контур вокруг заданного графического элемента.

Свойства fill и stroke определяют цвет (закраску), используемый для отрисовки внутренней части и контура вокруг фигур и текста.

Список веб-цветов можно найти в разделе HTML цвета.

Встроенные стили имеют приоритет над атрибутами представления. Например, встроенный стиль вроде <path style="stroke: #1c87c9;" ... /> имеет приоритет над атрибутом представления вроде <path stroke="#1c87c9" ... />.

INFO

Свойство stroke можно использовать как в качестве CSS-свойства, так и в качестве атрибута представления. Оно может быть применено к любому элементу, но влияет только на следующие элементы: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> и <tspan>.

Начальное значение	none
Применяется к	Элементам фигур и текстового содержимого.
Наследуется	Да.
Анимация	Нет.
Версия	Спецификация SVG 1.1
Синтаксис DOM	Object.stroke = "#1c87c9";

Синтаксис

Синтаксис CSS stroke

css

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

Пример свойства stroke:

Пример кода CSS stroke

html

<!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>

Try it Yourself »

Результат

example

Пример свойства stroke с тегом `<svg>`:

Ещё один пример кода CSS stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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>

Try it Yourself »

Значения

Значение	Описание
none	Краска не применяется.
color	Устанавливает сплошной цвет. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().
url	Ссылка на элемент сервера закраски, определяющий сервер закраски.
context-fill	Использует значение fill из элемента контекста.
context-stroke	Использует значение stroke из элемента контекста.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

В чём назначение CSS-свойства 'stroke' и как оно используется?

Свойство 'stroke' используется для установки цвета границы фигуры SVG.Свойство 'stroke' используется для установки цвета фона веб-страницы.Свойство 'stroke' можно применить к HTML-элементам, таким как 'div' или 'section'.Свойство stroke принимает различные значения, такие как названия цветов, шестнадцатеричные коды, rgb, rgba, hsl, hsla и ключевые слова цветов.'stroke' — это сокращённое свойство для stroke-width, stroke-linejoin и stroke-linecap.

CSS свойство stroke ​

Синтаксис ​

Пример свойства stroke: ​

Результат ​

Пример свойства stroke с тегом <svg>: ​

Значения ​