stroke

Базовая поддержка Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2020 г.⁩.

* Некоторые части этой функции могут поддерживаться в разной степени.

Атрибут stroke — это атрибут представления, определяющий цвет (или любой сервер заливки SVG, например градиент или узор), используемый для обводки фигуры.

Примечание: У атрибута представления stroke есть соответствующее CSS-свойство: stroke. Если заданы оба варианта, приоритет имеет CSS-свойство.

Этот атрибут можно использовать со следующими элементами SVG:

Примеры

Простая обводка цветом и градиентом

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Basic color stroke -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>

Результат:

Пример `context-stroke`

В этом примере мы задаём три фигуры с помощью элементов <path> и устанавливаем для каждой из них разные значения stroke и цвета fill. Также мы задаём элемент <circle> как маркер с помощью элемента <marker>. Для каждой фигуры маркер применяется с помощью CSS-свойства marker.

Для элемента <circle> заданы stroke="context-stroke" и fill="context-fill". Поскольку он используется как маркер для фигур, эти атрибуты заставляют его наследовать значения fill и stroke, заданные для элемента <path> в каждом случае.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url("#circle");
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

Результат:

Примечание: Элементы также могут использовать context-stroke и context-fill для наследования значений stroke и fill, когда на них ссылаются элементы <use>.

Примечания по использованию

Значение	<paint>
Значение по умолчанию	`none`
Анимируемый	Да

Спецификации

Спецификация
Масштабируемая векторная графика (SVG) 2> # Указание обводки>

Совместимость с браузерами

	Компьютер					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`stroke`	≤80	≤80	≤72	≤67	≤13.1	≤80	≤79	≤57	≤13.4	≤13.0	≤80	≤13.4
`context-stroke`	124	124	111	110	Нет	124	111	82	Нет	27.0	124	Нет

См. также

CSS-свойство stroke

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke