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

Свойство stroke-dasharray CSS задаёт узор из штрихов и промежутков, используемый при отрисовке обводки фигуры SVG. Если свойство задано, оно переопределяет атрибут stroke-dasharray элемента.

Это свойство применяется к любой фигуре SVG или элементу текстового содержимого (полный список см. в описании stroke-dasharray), но, поскольку оно наследуется, его можно применить к таким элементам, как <g>, и оно по-прежнему будет влиять на обводки дочерних элементов.

Синтаксис

/* Keywords */
stroke-dasharray: none;

/* Numeric, length, and percentage values */
stroke-dasharray: 2px, 5px;
stroke-dasharray: 20%, 50%;
stroke-dasharray: 2, 5;

/* The following two rules are equivalent */
stroke-dasharray: 2, 5, 3;
stroke-dasharray: 2, 5, 3, 2, 5, 3;

/* Global values */
stroke-dasharray: inherit;
stroke-dasharray: initial;
stroke-dasharray: revert;
stroke-dasharray: revert-layer;
stroke-dasharray: unset;

Значения

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

none

Обводка рисуется без штрихов. Значение по умолчанию.

<number>

Количество единиц SVG, размер которых определяется текущим пространством единиц. Отрицательные значения недопустимы.

<length>

Единицы пикселей обрабатываются так же, как единицы SVG (см. <number> выше), а длины, основанные на размере шрифта, например em, вычисляются относительно значения размера текста SVG для элемента; влияние других единиц длины может зависеть от браузера. Отрицательные значения недопустимы.

<percentage>

Проценты отсчитываются от нормализованной диагонали текущей области просмотра SVG, которая вычисляется как $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Отрицательные значения недопустимы.

Формальное определение

Формальный синтаксис

stroke-dasharray = 
  none |
  <dasharray>

<dasharray> = 
  [ [ <length-percentage> | <number> ]+ ]#

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Базовый массив штрихов

В этом примере показано базовое использование свойства stroke-dasharray со значениями <number>, разделёнными пробелами.

HTML

Сначала создадим простую прямоугольную фигуру SVG. Для этого прямоугольника зададим красную обводку шириной 2.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

Зададим узор штрихов для обводки: штрих длиной десять единиц, за которым следует промежуток длиной пять единиц. Это означает, что промежутки между штрихами будут вдвое короче самих штрихов.

rect {
  stroke-dasharray: 10 5;
}

Результаты

На поворотах обводки узор продолжается. В верхнем левом углу, где начало и конец обводки соединяются, начальный штрих длиной десять единиц, по-видимому, соединяется с частью узора в конце контура, образуя линию, которая огибает угол и выглядит длиннее десяти единиц.

Повторение массива штрихов

В этом примере используется нечётное количество значений <number>, разделённых запятыми. Он показывает, как значение повторяется, если задано нечётное количество значений, чтобы получить чётное количество.

HTML

В этом примере зададим два прямоугольника.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

Для первого прямоугольника зададим массив штрихов 5, 5, 1: штрих длиной пять единиц, промежуток длиной пять единиц и штрих длиной одну единицу. Однако, поскольку в списке нечётное количество чисел, весь набор чисел повторяется. В результате получается значение, идентичное заданному для второго прямоугольника.

rect:nth-of-type(1) {
  stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5, 5, 1, 5, 5, 1;
}

Результат

Чётное количество чисел необходимо, чтобы каждый массив штрихов начинался со штриха и заканчивался промежутком. Таким образом, заданный узор состоит из штриха длиной пять единиц, промежутка длиной пять единиц, штриха длиной одну единицу, промежутка длиной пять единиц, штриха длиной пять единиц и промежутка длиной одну единицу. В получившейся обводке каждое появление промежутка длиной одну единицу между двумя штрихами длиной пять единиц обозначает место, где массив штрихов начинается заново.

Значения в процентах и пикселях

В этом примере показано использование значений <percentage> и <length> в значении свойства stroke-dasharray.

HTML

Как и в предыдущем примере, зададим два прямоугольника.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

На этот раз вместо наборов чисел без единиц измерения используем пиксели и проценты.

rect:nth-of-type(1) {
  stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5%, 5%, 1%;
}

Результаты

Результаты практически не отличаются от результатов предыдущего примера.

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

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

См. также

• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• stroke
• Атрибут SVG stroke-dasharray