stroke-dashoffset

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

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

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

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

html,body,svg { height:100% }

<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)

Пример

HTML

<?xml version="1.0"?>
<svg width="200" height="230" viewBox="0 0 200 200"
version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line  stroke-dasharray="20, 5" x1="10" y1="10" x2="190" y2="10" />
    <!--
      Поскольку размер штриха 20 с разрывами 5,
      добавление смещения dash-offset 20 приводит к тому,
      что линия начинается с разрыва.
    -->
    <line stroke-dashoffset="20" stroke-dasharray="20, 5"
      x1="10" y1="30" x2="190" y2="30" />
    <!--
      Добавление смещения штрихов на 10% приводит к началу линии с разрывом там же,
      потому что элемент svg имеет ширину области просмотра 200.
      Меняя размер svg, меняется и значение в пикселях stroke-dashoffset.
    -->
    <line stroke-dashoffset="10%" stroke-dasharray="20, 5"
      x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dashoffset="10" stroke-dasharray="20, 5"
      x1="10" y1="70" x2="190" y2="70" />

    <line stroke-dashoffset="100" stroke-dasharray="200"
      x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dashoffset="100" stroke-dasharray="100"
      x1="10" y1="110" x2="190" y2="110" />
    <!--
      Без stroke-dasharray - stroke-dashoffset не даст никакого эффекта.
    -->
    <line stroke-dashoffset="50" x1="10" y1="130" x2="190" y2="130" />
    <!--
      stroke-dashoffset values can be negative and as expected offest
      in the opposite direction as a positive value.
      Значения смещения штрихов могут быть отрицательными
      с направлением, обратным положительному значению.
    -->
    <line stroke-dashoffset="-40" stroke-dasharray="80"
      x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="80"
      x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dashoffset="-10%" stroke-dasharray="65, 5, 1, 5"
      x1="10" y1="190" x2="190" y2="190" />
    <line  stroke-dasharray="65, 5, 1, 5" x1="10" y1="210" x2="190" y2="210" />
    <style><![CDATA[
      line{
        stroke: black;
        stroke-width: 2;
        }
        ]]>
    </style>
</svg>

Результат

Элементы

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