diff options
Diffstat (limited to 'files/ru/web/svg/attribute/stroke-dashoffset/index.html')
| -rw-r--r-- | files/ru/web/svg/attribute/stroke-dashoffset/index.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.html b/files/ru/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..6f9462e40f --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,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" title="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> |