stroke-dasharray

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

none

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

<number>

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

<length>

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

<percentage>

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

stroke-dasharray = 
  none                                  |
  [ <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

Для первой прямоугольной формы мы определяем dasharray из 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 атрибут