W3docs
ru
Войти

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

Как использовать CSS-свойство stroke-dashoffset для задания начальной позиции штриховки обводки. Описание свойства и примеры значений.

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

На этой странице объясняется, как смещение сдвигает штриховой узор, почему его анимация создаёт популярный эффект «самостоятельно рисующейся линии», и какие значения оно принимает.

stroke-dashoffset можно задать двумя способами: как атрибут представления на элементе SVG (stroke-dashoffset="5") или как CSS-свойство (stroke-dashoffset: 5;). При одновременном использовании CSS-правило имеет приоритет над атрибутом представления, а инлайновое объявление style имеет приоритет над обоими.

Как работает смещение

Представьте штриховой узор как линейку, уложенную вдоль пути. stroke-dashoffset сдвигает эту линейку вперёд или назад перед тем, как путь отрисовывается:

  • Положительное значение сдвигает узор назад вдоль пути (штрих, находившийся до начала, оказывается в поле зрения).
  • Отрицательное значение сдвигает узор вперёд.
  • Смещение оборачивается по полной длине одного цикла «штрих-промежуток», поэтому смещение, равное длине цикла, выглядит так же, как 0.

Поскольку значение представляет собой просто расстояние, единицы измерения (px, em) необязательны в пользовательском пространстве SVG — голое число интерпретируется в пользовательских единицах.

Информация

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

Информация

Единицы «px» или «em» не обязательны.

Начальное значение0
Применяется кЭлементам фигур и текстового содержимого.
НаследуетсяДа.
АнимируемоДа.
ВерсияSVG 1.1 Specification
DOM-синтаксисObject.strokeDashoffset = 5;

Синтаксис

Синтаксис CSS stroke-dashoffset

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

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

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

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

<!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>
Попробуйте сами »

Результат

Список значений CSS stroke-dashoffset

Каждая линия выше использует одинаковый stroke-dasharray, но разное смещение, поэтому штрихи выровнены по разным начальным точкам. Элемент <path> с небольшими отметками показывает точное место начала каждого узора.

Анимация «самостоятельно рисующейся линии»

Наиболее распространённая причина использования stroke-dashoffset — анимация SVG, при которой он как будто рисуется сам. Принцип состоит в том, чтобы задать и массив штрихов, и смещение равными полной длине пути: это делает всю обводку одним огромным промежутком (невидимым). Анимация смещения обратно до 0 постепенно вводит единственный штрих в поле зрения, рисуя линию от начала до конца.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .draw {
        fill: none;
        stroke: #1c87c9;
        stroke-width: 4;
        /* One dash and one gap, each as long as the path */
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: draw 2s ease forwards;
      }
      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>Self-drawing line</h2>
    <svg viewBox="0 0 110 110" width="160">
      <path class="draw" d="M5,55 C5,5 105,5 105,55 S5,105 5,55" />
    </svg>
  </body>
</html>

Чтобы точно воспроизвести этот эффект для любой фигуры, прочитайте длину пути в JavaScript с помощью path.getTotalLength() и используйте это значение как для stroke-dasharray, так и для начального stroke-dashoffset.

Распространённые ошибки

  • Узор вообще не двигается. stroke-dashoffset работает только при наличии stroke-dasharray. Без штрихов нечего смещать.
  • Обводка не видна. Элемент должен иметь цвет stroke и ненулевой stroke-width; смещение не влияет на обводку, которую нельзя увидеть.
  • Анимация рисования рисует только «половину». Убедитесь, что оба значения — stroke-dasharray и начальный stroke-dashoffset — не меньше getTotalLength(); если они меньше, промежуток слишком мал, чтобы скрыть весь путь.

Значения

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

Практика

Практика
Каково назначение CSS-свойства stroke-dashoffset и как оно используется?
Каково назначение CSS-свойства stroke-dashoffset и как оно используется?
Was this page helpful?