w3docs logo

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

Свойство stroke-dashoffset определяет точку на пути SVG, откуда должен начинаться пунктир контура.

Единицы измерения "px" или "em" не требуются.
Значение по умолчанию 0
Применяется К формам и элементам с текстовым контентом.
Наследуется Да
Анимируемое Нет
Версия SVG 1.1 Specification
DOM синтаксис Object.strokeDashoffset = "5";

Синтаксис

stroke-dashoffset: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke-dashoffset</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>

Значения

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

Поддержка браузера

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Практикуйте свои знания

Что представляет собой свойство 'stroke-dashoffset' в CSS?
Считаете ли это полезным?