W3docs
ru
Войти

CSS свойство stroke

How to use the stroke CSS property to paint the outline of the element. Read about the property and see the values with examples.

Свойство 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
Синтаксис DOMObject.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>
Попробуйте сами »

Результат

example

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

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

<!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>
Попробуйте сами »

Значения

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

Практика

Практика

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