diff options
Diffstat (limited to 'files/ru/web/svg/attribute/d/index.html')
| -rw-r--r-- | files/ru/web/svg/attribute/d/index.html | 566 |
1 files changed, 566 insertions, 0 deletions
diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..708aa0cbad --- /dev/null +++ b/files/ru/web/svg/attribute/d/index.html @@ -0,0 +1,566 @@ +--- +title: d +slug: Web/SVG/Attribute/d +translation_of: Web/SVG/Attribute/d +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>d</code></strong> предоставляет определение пути для рисования.</p> + +<p>Определение пути - это <a href="#Path_commands">список команд пути</a>, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.</p> + +<p>Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +</div> + +<h2 id="path">path</h2> + +<p>Для {{SVGElement('path')}}, <code>d</code> - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="glyph">glyph</h2> + +<p class="warning"><strong>Warning:</strong> Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>Внимание:</strong> Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('missing-glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Команды_пути">Команды пути</h2> + +<p><em>(Path commands)</em></p> + +<p>Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.</p> + +<p>SVG определяет 6 типов команд пути для всех 20 команд:</p> + +<ul> + <li>MoveTo: <code>M</code>, <code>m</code></li> + <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li> + <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li> + <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li> + <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li> + <li>ClosePath: <code>Z</code>, <code>z</code></li> +</ul> + +<p class="note"><strong>Заметка:</strong> Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.</p> + +<p>Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.</p> + +<h3 id="Команды_перемещения">Команды перемещения</h3> + +<p><em>(MoveTo path commands)</em></p> + +<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> + +<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Команда</th> + <th scope="col">Параметры</th> + <th scope="col">Примечания</th> + </tr> + <tr> + <th scope="row">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Движение начала следующего под-пути к координатам <code>x</code>,<code>y</code>. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).<br> + Формула: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">m</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td> + <p>Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на <code>dx</code> вдоль оси <code>x</code> и на <code>dy</code> вдоль оси <code>y</code>. Любая последующая пара координат считается неявной относительной командой LineTo (<code>l</code>) (см. ниже)<br> + Формула: P<sub>n</sub>= {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 40,20 h 10 + m 0,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 50,50 h 10 + m-20,10 h 10 + m-20,10 h 10 + m-20,10 h 10" /> +</svg></pre> + +<p>{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands">LineTo path commands</h3> + +<p><em>LineTo</em> инструкции проводят прямую линию от <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}), до <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), на основе указанных параметров. Конечная точка <em>end point </em>(P<sub>n</sub>) становится текущей точкой для следующей команды (P<sub>o</sub><sup>'</sup>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">L</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td> + <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Draw a line from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (<code>l</code>) command (<em>see below</em>).</td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td>Draw a horizontal line from the current point to the new <code>x</code> coordinate (<em>y coordinate stay unchanged</em>). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (<code>H</code>) command.</td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td>Draw a horizontal line from the current point to a point shift by <code>dx</code> along the the x-axis (<em>y coordinate stay unchanged</em>). The current point get its X coordinate updated by <code>dx</code> for the next command. All subsequente value are considered an implicite relative horizontal LineTo (<code>h</code>) command.</td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td>Draw a vertical line from the current point to the new <code>y</code> coordinate (<em>x coordinate stay unchanged</em>). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (<code>V</code>) command.</td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td>Draw a vertical line from the current point to a point shift by <code>dy</code> along the y-axis (<em>x coordinate stay unchanged</em>). The current point get its Y coordinate updated by <code>dy</code> for the next command. All subsequente value are considered an implicite relative vertical LineTo (<code>v</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_2">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- LineTo commands in absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,10 + L 90,90 + V 10 + H 50" /> + + <!-- LineTo commands in relative coordinates --> + <path fill="none" stroke="red" + d="M 110,10 + l 80,80 + v -80 + h -40" /> +</svg></pre> + +<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p> + +<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3> + +<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">C</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point at the begining of the curve where <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (<code>C</code>) command.</td> + </tr> + <tr> + <th scope="row">c</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (<code>c</code>) command.</td> + </tr> + <tr> + <th scope="row">S</th> + <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (<code>S</code>) command.</td> + </tr> + <tr> + <th scope="row">s</th> + <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (<code>s</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_3">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Quadratic Bézier curve with absolute coordinate --> + <path fill="none" stroke="red" + d="M 10,90 + C 30,90 25,10 50,10 + S 70,90 90,90" /> + + <!-- Quadratic Bézier curve with relative coordinate --> + <path fill="none" stroke="red" + d="M 110,90 + c 20,0 15,-80 40,-80 + s 20,80 40,80" /> + + <!-- Highlight the curve vertex and control points --> + <g id="ControlPoints"> + + <!-- First cubic command control points --> + <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> + <circle cx="30" cy="90" r="1.5"/> + + <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> + <circle cx="25" cy="10" r="1.5"/> + + <!-- Second smooth command control points (the first one is implicite) --> + <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> + <circle cx="75" cy="10" r="1.5" fill="lightgrey"/> + + <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /> + <circle cx="70" cy="90" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="90" r="1.5"/> + <circle cx="50" cy="10" r="1.5"/> + <circle cx="90" cy="90" r="1.5"/> + </g> + <use xlink:href="#ControlPoints" x="100" /> +</svg></pre> + +<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3> + +<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Q</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point for the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (<code>Q</code>) command.</td> + </tr> + <tr> + <th scope="row">q</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (<code>q</code>) command.</td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (<code>T</code>) command.</td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (<code>t</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_4">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Quadratic Bézier curve with implicite repetition --> + <path fill="none" stroke="red" + d="M 10,50 + Q 25,25 40,50 + t 30,0 30,0 30,0 30,0 30,0" /> + + <!-- Highlight the curve vertex and control points --> + <g> + <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> + <circle cx="25" cy="25" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="50" r="1.5"/> + <circle cx="40" cy="50" r="1.5"/> + + <g id="SmoothQuadraticDown"> + <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> + <circle cx="70" cy="50" r="1.5" /> + </g> + + <g id="SmoothQuadraticUp"> + <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> + <circle cx="100" cy="50" r="1.5" /> + </g> + + <use xlink:href="#SmoothQuadraticDown" x="60" /> + <use xlink:href="#SmoothQuadraticUp" x="60" /> + <use xlink:href="#SmoothQuadraticDown" x="120" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3> + +<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">A</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (<code>A</code>) command.</td> + </tr> + <tr> + <th scope="row">a</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente set of parameters are considered implicite relative arc curve (<code>a</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_5">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + + <!-- The influence of the arc flags on which arc is drawn --> + <path fill="none" stroke="red" + d="M 6,10 + A 6 4 10 1 0 14,10" /> + + <path fill="none" stroke="lime" + d="M 6,10 + A 6 4 10 1 1 14,10" /> + + <path fill="none" stroke="purple" + d="M 6,10 + A 6 4 10 0 1 14,10" /> + + <path fill="none" stroke="pink" + d="M 6,10 + A 6 4 10 0 0 14,10" /> +</svg></pre> + +<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p> + +<h3 id="ClosePath">ClosePath</h3> + +<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Z, z</th> + <td></td> + <td>Close the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p> + +<h4 id="Examples_6">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> + + <!-- + An open shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 5,1 + l -4,8 8,0" /> + + <!-- + An open shape with the last point of + the path matching the first one + --> + <path stroke="red" + d="M 15,1 + l -4,8 8,0 -4,-8" /> + + <!-- + An closed shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 25,1 + l -4,8 8,0 + z" /> +</svg></pre> + +<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><path></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><glyph></code> and <code><missing-glyph></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><path></code></td> + </tr> + </tbody> +</table> |