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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

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

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

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

Пример

html,
body,
svg {
  height: 100%;
}

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