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

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

Правила CSS имеют приоритет над презентационными атрибутами. Встроенные стили имеют приоритет над обоими.

INFO

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

INFO

Единицы "px" или "em" не требуются.

Initial Value	0
Applies to	Shapes and text content elements.
Inherited	Yes.
Animatable	Yes.
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeDashoffset = 5;

Синтаксис

Синтаксис CSS для stroke-dashoffset

css

stroke-dashoffset: length | percentage | initial | inherit;

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

Значение stroke-dashoffset сдвигает начальную точку шаблона штрихов вдоль пути.

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dashoffset property example</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

Try it Yourself »

Результат

CSS stroke-dashoffset values list

Значения

Value	Description
length	Задаёт длину свойства. Единицы "px" или "em" не требуются.
percentage	Свойство задаётся в процентах.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Practice

Какова цель CSS-свойства stroke-dashoffset и как оно используется?

Оно используется для изменения положения штрихов в пунктирной линии.Оно задаёт размеры border image.Оно изменяет стиль обводки элемента.Оно использует значения <length> для определения смещения штриха обводки.Оно принимает только значения в процентах для определения смещения штриха обводки.

Свойство CSS stroke-dashoffset ​

Синтаксис ​

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

Результат ​