1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: stroke-dashoffset
slug: Web/SVG/Attribute/stroke-dashoffset
tags:
- SVG
- SVG атрибуты
translation_of: Web/SVG/Attribute/stroke-dashoffset
---
<div class="blockIndicator note">
<p><strong>Прежняя редакция:</strong> « <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a><br>
Этот атрибут определяет смещение обводки относительно начального положения.<br>
При использовании <a href="/ru/SVG/Content_type#Percentage" title="ru/SVG/Content_type#Percentage"><percentage></a>, значение будет вычисляться от текущего viewport.<br>
Значение может быть отрицательным.</p>
</div>
<p>{{SVGRef}}<br>
Атрибут <strong><code>stroke-dashoffset</code></strong> определяет сдвиг массива <strong>dash array </strong>относительно начального положения.</p>
<p class="note"><strong>Сноска:</strong> Атрибут <code>stroke-dashoffset</code> может использоваться как свойство CSS.</p>
<p>Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} </p>
<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: 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>
</pre>
<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Категория</th>
<td>Атрибут оформления</td>
</tr>
<tr>
<th scope="row">Значение</th>
<td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td>
</tr>
<tr>
<th scope="row">Исходное значение</th>
<td>0</td>
</tr>
<tr>
<th scope="row">Анимируемый</th>
<td>Да</td>
</tr>
<tr>
<th scope="row">Спецификация</th>
<td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td>
</tr>
</tbody>
</table>
<h2 id="Пример">Пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample('Пример', '220', '240')}}</p>
<h2 id="Элементы">Элементы</h2>
<p>Следующие элементы могут использовать атрибут <code>stroke-dashoffset</code></p>
<ul>
<li><a href="/ru/SVG/Element#Shape" title="ru/SVG/Element#Shape">Элементы форм</a> »</li>
<li><a href="/ru/SVG/Element#TextContent" title="ru/SVG/Element#TextContent">Текстовые элементы</a> »</li>
</ul>
|
