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