stroke-dashoffset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Примечание: Прежняя редакция: « Справочник SVG атрибутов Этот атрибут определяет смещение обводки относительно начального положения. При использовании <percentage>, значение будет вычисляться от текущего viewport. Значение может быть отрицательным.

Атрибут stroke-dashoffset определяет сдвиг массива dash array относительно начального положения.

Примечание: Атрибут stroke-dashoffset может использоваться как свойство CSS.

Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

Пример

html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Без dash array -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Без dash offset -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
  Начало dash array тянет 3 отрезка
  -->
  <line
    x1="0"
    y1="5"
    x2="30"
    y2="5"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="3" />

  <!--
  Начало dash array толкает 3 отрезка
  -->
  <line
    x1="0"
    y1="7"
    x2="30"
    y2="7"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="-3" />

  <!--
  Начало dash array тянет 1 отрезок с финишем в том же рендеринге,
  что и в предыдущем примере
  -->
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="1" />

  <!--
  красным выделено   смещение dash array для каждой строки
  -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
</svg>

Usage context

Категория Атрибут оформления
Значение <percentage> | <length> | inherit
Исходное значение 0
Анимируемый Да
Спецификация SVG 1.1 (2nd Edition)

Элементы

Следующие элементы могут использовать атрибут stroke-dashoffset