CSS-свойство `stroke-dashoffset`

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

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

Синтаксис

/* Keyword */
stroke-dashoffset: none;

/* Length and percentage values */
stroke-dashoffset: 2;
stroke-dashoffset: 2px;
stroke-dashoffset: 2%;

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

Значения

<number> Нестандартное

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

<length>

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

<percentage>

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

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

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

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

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

Примеры

Смещение штрихов

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

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
  <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