stroke-dashoffset

<number> Нестандартный

Числовое значение в единицах SVG, размер которых определяется текущим пространством единиц. Приведенное значение, если оно отличается от 0, перемещает начальную точку от начала массива штрихов к другой точке внутри него. Таким образом, положительные значения будут казаться сдвигом шаблона чередования штрихов и пробелов назад, а отрицательные значения - сдвигом шаблона вперед.

<length>

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

<percentage>

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

stroke-dashoffset = 
  <length-percentage>  |
  <number>             

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

Чтобы показать, как можно сместить штрихи, мы сначала создадим пять идентичных путей, всем из которых задан массив штрихов длиной 20 единиц, за которым следует разрыв в 3 единицы, с помощью атрибута SVG stroke-dasharray. (Это также можно было сделать с помощью свойства CSS stroke-dasharray.) Затем путям задаются индивидуальные смещения штрихов с помощью CSS.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#EEE" />
  <g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
    <path d="M 10,10 h 80" />
    <path d="M 10,15 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,25 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -5;
}
path:nth-of-type(3) {
  stroke-dashoffset: 5;
}
path:nth-of-type(4) {
  stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
  stroke-dashoffset: 5%;
}

В порядке:

1. Первому из пяти путей задано смещение ноль, что является поведением по умолчанию.
2. Второму пути задано смещение -5, что сдвигает начальную точку массива на пять единиц перед нулевой точкой. Визуальный эффект заключается в том, что шаблон штрихов и пробелов сдвигается вперед на пять единиц; таким образом, мы видим в начале пути последние две единицы штриха, а затем трех-единичный разрыв.
3. Третьему пути задано смещение 5, что означает, что начальная точка штрихов находится на расстоянии пяти единиц от начала шаблона штрихов. Визуальный эффект заключается в сдвиге шаблона штрихов назад на пять единиц; таким образом, мы видим в начале пути последние пятнадцать единиц штриха, за которыми следует трех-единичный разрыв.
4. Четвертому пути задано смещение 5px, которое имеет тот же эффект, что и значение 5 (см. выше).
5. Пятому и последнему пути задано смещение 5%, что очень похоже на предыдущие два примера, но не совсем то же самое. Проценты рассчитываются относительно диагонального размера представления SVG, и поэтому могут сильно зависеть от размера и соотношения сторон этого представления.

• Атрибут SVG stroke-dashoffset
• Свойство CSS stroke-dasharray
• Свойство CSS stroke