W3docs
ru
Войти

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

Как использовать CSS-свойство stroke-dasharray для создания пунктирных линий. Описание свойства, значений и примеры.

Свойство stroke-dasharray управляет шаблоном штрихов и пробелов, используемым при отрисовке контура (обводки) SVG-фигуры. Вместо сплошной линии обводка разбивается на чередующиеся штрихи и пробелы, что позволяет рисовать пунктирные и точечные границы, разделители и линии для анимаций прорисовки обводки.

На этой странице рассматривается интерпретация списка значений, правило дублирования при нечётном количестве элементов, которое часто вызывает затруднения, распространённые варианты использования, а также взаимодействие stroke-dasharray со связанными свойствами.

Как работает список значений

stroke-dasharray принимает значение none или <dasharray> — список длин или процентных значений, разделённых запятыми и/или пробелами. Числа читаются по порядку как штрих, пробел, штрих, пробел…, и весь список повторяется вдоль пути:

  • Одно значение — 4 рисует штрих длиной 4, затем пробел длиной 4, и так повторяется. Штрихи и пробелы равны.
  • Два значения — 8 2 рисует штрих длиной 8 единиц, пробел длиной 2 единицы, и так повторяется. Наиболее распространённая форма.
  • Несколько значений — 4 1 2 1 циклически проходит штрих 4, пробел 1, штрих 2, пробел 1, затем начинает заново.

Важный нюанс: если задано нечётное количество значений, список дублируется для получения чётного количества. Так, 5 3 2 ведёт себя как 5 3 2 5 3 2, то есть штрих 5, пробел 3, штрих 2, штрих 5, пробел 3, штрих 2 — роли чисел меняются на втором проходе. Используйте чётное количество значений, если хотите получить предсказуемый повторяющийся шаблон.

Значение 0 для штриха создаёт точку при использовании совместно с stroke-linecap: round — именно так создаются закруглённые пунктирные линии.

Распространённые варианты использования

  • Пунктирные и точечные границы или разделители на иконках и иллюстрациях, когда CSS border не может следовать по изогнутому или диагональному пути.
  • Анимации прорисовки линий («самопрорисовка»), когда stroke-dasharray устанавливается равным длине пути, а stroke-dashoffset анимируется от этого значения до 0, создавая эффект самостоятельно рисующейся обводки.
  • Кольца прогресса и индикаторы загрузки, где анимация штриха и смещения раскрывает круговую обводку.

Встроенные стили CSS переопределяют SVG-атрибуты представления. Например, встроенный стиль stroke-dasharray: 4; имеет приоритет над атрибутом представления stroke-dasharray="4".

Информация

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

Начальное значениеnone
Применяется кФигурам и элементам текстового содержимого.
НаследуетсяДа.
АнимируемоеНет.
ВерсияSVG 1.1 Specification
DOM-синтаксисObject.strokeDasharray = "none";

Синтаксис

CSS-синтаксис stroke-dasharray

stroke-dasharray: none | <dasharray> | initial | inherit;

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</h2>
    <svg height="80" width="300">
      <g fill="none" stroke="black" stroke-width="4">
        <path stroke-dasharray="6,6" d="M5 20 l215 0" />
        <path stroke-dasharray="8,10" d="M5 40 l215 0" />
        <path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>
Попробуйте сами »

Результат

CSS stroke-dasharray

Пример свойства stroke-dasharray с элементом <line>:

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</h2>
    <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
        stroke-dasharray="3" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#000"
        stroke-dasharray="5 1" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
        stroke-dasharray="4 2 2" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="4 1 3 2" />
    </svg>
  </body>
</html>
Попробуйте сами »

В этом примере каждый элемент <line> использует разный шаблон: сплошная линия (без dasharray), затем 3 (равные штрихи и пробелы), 5 1 (длинные штрихи, маленькие пробелы), а также шаблоны с нечётным количеством значений 4 2 2 и 4 1 3 2, которые повторяются за два прохода, как описано выше.

Значения

ЗначениеОписание
noneШтрихи не используются.
<dasharray>Используется шаблон штрихов.
initialУстанавливает для свойства значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Связанные свойства

stroke-dasharray — одно из нескольких свойств, управляющих стилем контура SVG. Его часто используют совместно со следующими свойствами:

  • stroke-dashoffset — смещает начало шаблона штрихов; ключевое свойство для анимаций прорисовки линий.
  • stroke-linecap — управляет формой концов штрихов (butt, round, square); используйте round, чтобы превратить штрихи нулевой длины в точки.
  • stroke-width — задаёт толщину обводки.
  • stroke — задаёт цвет обводки.
  • fill — задаёт цвет заливки фигуры.

Практика

Практика
Какова функция свойства 'stroke-dasharray' в CSS?
Какова функция свойства 'stroke-dasharray' в CSS?
Was this page helpful?