stroke-dasharray

Базовый уровень Широко доступно

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

Атрибут stroke-dasharray — это атрибут представления, определяющий шаблон штрихов и промежутков, используемый для обводки фигуры.

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

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

Пример

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>

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

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

<dasharray>

Список значений <length> и <percentage>, разделённых запятыми и/или пробелами, которые задают длину чередующихся штрихов и промежутков.

Если указано нечётное количество значений, список повторяется, чтобы получить чётное количество значений. Таким образом, 5,3,2 эквивалентно 5,3,2,5,3,2.

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`stroke-dasharray`	≤80	≤80	1	≤67	≤13.1	≤80	4	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

Свойство CSS stroke-dasharray

© 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-dasharray