diff options
Diffstat (limited to 'files/ko/web/svg/attribute/d/index.html')
| -rw-r--r-- | files/ko/web/svg/attribute/d/index.html | 575 |
1 files changed, 575 insertions, 0 deletions
diff --git a/files/ko/web/svg/attribute/d/index.html b/files/ko/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..19f60cdac9 --- /dev/null +++ b/files/ko/web/svg/attribute/d/index.html @@ -0,0 +1,575 @@ +--- +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 path definition is a list of <a href="#Path_commands">path commands</a> where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.</p> + +<p>Three elements have this attribute: {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{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>For {{SVGElement('path')}}, <code>d</code> is a string containing a series of path commands that define the path to be drawn.</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> As of SVG2 {{SVGElement('glyph')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</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>Note:</strong> The point of origin (the coordinate <code>0</code>,<code>0</code>) is usually the <em>upper left corner</em> of the context. However the {{SVGElement("glyph")}} element has its origin in the <em>bottom left corner</em> of its letterbox.</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('missing-glyph')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('missing-glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</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="Path_commands">Path commands</h2> + +<p>Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.</p> + +<p>SVG defines 6 types of path commands, for a total of 20 commands:</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>Note:</strong> Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specifies points relative to the current position.</p> + +<p>It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute x and y positions will be taken as negative coordinates; negative relative x values will move to the left; and negative relative y values will move upwards.</p> + +<h3 id="MoveTo_path_commands">MoveTo path commands</h3> + +<p><em>MoveTo</em> instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else, i.e. moving the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}). There is no line drawn between P<sub>o </sub>and the new <em>current point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}).</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">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Move the <em>current point</em> to the coordinate <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s) (<em>see below</em>). Formula: 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>Move the <em>current point</em> by shifting the last known position of the path by <code>dx</code> along the x-axis and by <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</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('MoveTo_path_commands', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands">LineTo path commands</h3> + +<p><em>LineTo</em> instructions draw a straight line from the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}) to the <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), based on the parameters specified. The <em>end point </em>(P<sub>n</sub>) then becomes the <em>current point </em>for the next command (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>Draw a line from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Draw a line from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td>Draw a horizontal line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>x</code> parameter and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (<code>H</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, y<sub>o</sub>}</td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td>Draw a horizontal line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dx</code> along the x-axis and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (<code>h</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub>}</td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td>Draw a vertical line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>y</code> parameter and the <em>current point's</em> x coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (<code>V</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td>Draw a vertical line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dy</code> along the y-axis and the <em>current point's</em> x coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (<code>v</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o, </sub>y<sub>o</sub> + <code>dy</code>}</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 with absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,10 + L 90,90 + V 10 + H 50" /> + + <!-- LineTo commands with 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:</p> + +<ul> + <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li> + <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li> + <li><em>start control point </em> (P<sub>cs</sub> = {x<sub>cs</sub>, y<sub>cs</sub>}) (controls curvature near the start of the curve)</li> + <li><em>end control point </em>(P<sub>ce</sub> = {x<sub>ce</sub>, y<sub>ce</sub>}) (controls curvature near the end of the curve).</li> +</ul> + +<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</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 cubic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>start control point</em> is specified by <code>x1</code>,<code>y1</code> and the <em>end control point </em>is specified by <code>x2</code>,<code>y2</code><em>.</em> Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (<code>C</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>cs</sub> = {<code>x1</code>, <code>y1</code>} ; P<sub>ce</sub> = {<code>x2</code>, <code>y2</code>}</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 cubic Bézier curve from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>start control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. The <em>end control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit relative cubic Bézier curve (<code>c</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>cs</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>} ; P<sub>ce</sub> = {x<sub>o</sub> + <code>dx2</code>, y<sub>o</sub> + <code>dy2</code>}</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 cubic Bézier curve from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. The <em>end control point</em> is specified by <code>x2</code>,<code>y2</code>. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic Bézier curve (<code>S</code>) commands.</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 cubic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>end control point</em> is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic Bézier curve (<code>s</code>) commands.</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"> + + <!-- Cubic Bézier curve with absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,90 + C 30,90 25,10 50,10 + S 70,90 90,90" /> + + <!-- Cubic Bézier curve with relative coordinates --> + <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 implicit) --> + <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:</p> + +<ul> + <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li> + <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li> + <li><em>control point </em> (P<sub>c</sub> = {x<sub>c</sub>, y<sub>c</sub>}) (controls curvature)</li> +</ul> + +<p> </p> + +<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p> + +<p> </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 quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is specified by <code>x1</code>,<code>y1</code>. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (<code>Q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>c</sub> = {<code>x1</code>, <code>y1</code>}</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 quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative quadratic Bézier curve (<code>q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>c</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>}</td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is a reflection of the <em>control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic Bézier curve (<code>T</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is a reflection of the <em>control point </em>of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic Bézier curve (<code>t</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</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> represents 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 subsequent sets of parameters are considered implicit absolute arc curve (<code>A</code>) commands.</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> represents 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 subsequent sets of parameters are considered implicit relative arc curve (<code>a</code>) commands.</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 current 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> |