Revision 987343 of SVGPathElement

Revision slug: Web/API/SVGPathElement
Revision title: SVGPathElement
Revision id: 987343
Created: Jan 7, 2016, 12:50:22 PM
Creator: jpmedley
Is current revision? No
Comment

Tags:

Revision Content

SVG path interface

The SVGPathElement interface corresponds to the {{ SVGElement("path") }} element.

Interface overview

Also implement	{{ domxref("SVGElement") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}, {{ domxref("SVGAnimatedPathData") }}
Methods	`float getTotalLength()` `{{ domxref("SVGPoint") }} getPointAtLength(in float distance)` `unsigned long getPathSegAtLength(in float distance)` `{{ domxref("SVGPathSegClosePath") }} createSVGPathSegClosePath()` `{{ domxref("SVGPathSegMovetoAbs") }} createSVGPathSegMovetoAbs(in float x, in float y)` `{{ domxref("SVGPathSegMovetoRel") }} createSVGPathSegMovetoRel(in float x, in float y)` `{{ domxref("SVGPathSegLinetoAbs") }} createSVGPathSegLinetoAbs(in float x, in float y)` `{{ domxref("SVGPathSegLinetoRel") }} createSVGPathSegLinetoRel(in float x, in float y)` `{{ domxref("SVGPathSegCurvetoCubicAbs") }} createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoCubicRel") }} createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoQuadraticAbs") }} createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)` `{{ domxref("SVGPathSegCurvetoQuadraticRel") }} createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)` `{{ domxref("SVGPathSegArcAbs") }} createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `{{ domxref("SVGPathSegArcRel") }} createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `{{ domxref("SVGPathSegLinetoHorizontalAbs") }} createSVGPathSegLinetoHorizontalAbs(in float x)` `{{ domxref("SVGPathSegLinetoHorizontalRel") }} createSVGPathSegLinetoHorizontalRel(in float x)` `{{ domxref("SVGPathSegLinetoVerticalAbs") }} createSVGPathSegLinetoVerticalAbs(in float y)` `{{ domxref("SVGPathSegLinetoVerticalRel") }} createSVGPathSegLinetoVerticalRel(in float y)` `{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)` `{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);`
Properties	{{ domxref("SVGAnimatedNumber") }} `pathLength`
Normative document	SVG 1.1 (2nd Edition)

Properties

Name	Type	Description
`pathLength`	{{ domxref("SVGAnimatedNumber") }}	Corresponds to attribute {{ SVGAttr("pathLength") }} on the given {{ SVGElement("path") }} element.

Methods

Specifications

Specification	Status	Comment
{{SpecName('SVG1.1')}}	{{Spec2('SVG1.1')}}	Initial definition.
{{SpecName('SVG2')}}	{{Spec2('SVG2')}}	Initial definition.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	{{ CompatVersionUnknown() }}[1]	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	{{ CompatNo() }}	{{CompatVersionUnknown}}[1]	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{CompatVersionUnknown}}[1]

[1] As required by the latest version of the spec, most of this interface was deprecated in Chrome 47. Removed in Chrome 48. The properties and methods still supported inlcude: getToalLength(), getPointAtLength(), and getPathSegAtLength().

Revision Source

<div>{{APIRef("SVG")}}</div>

<h2 id="SVG_path_interface">SVG path interface</h2>

<p>The <code>SVGPathElement</code> interface corresponds to the {{ SVGElement("path") }} element.</p>

<h3 id="Interface_overview">Interface overview</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Also&nbsp;implement</th>
   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}, {{ domxref("SVGAnimatedPathData") }}</td>
  </tr>
  <tr>
   <th scope="row">Methods</th>
   <td>
    <ul>
     <li><code>float getTotalLength()</code></li>
     <li><code>{{ domxref("SVGPoint") }} getPointAtLength(in float distance)</code></li>
     <li><code>unsigned long getPathSegAtLength(in float distance)</code></li>
     <li><code>{{ domxref("SVGPathSegClosePath") }} createSVGPathSegClosePath()</code></li>
     <li><code>{{ domxref("SVGPathSegMovetoAbs") }} createSVGPathSegMovetoAbs(in float x, in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegMovetoRel") }} createSVGPathSegMovetoRel(in float x, in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoAbs") }} createSVGPathSegLinetoAbs(in float x, in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoRel") }} createSVGPathSegLinetoRel(in float x, in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoCubicAbs") }} createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoCubicRel") }} createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoQuadraticAbs") }} createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoQuadraticRel") }} createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)</code></li>
     <li><code>{{ domxref("SVGPathSegArcAbs") }} createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)</code></li>
     <li><code>{{ domxref("SVGPathSegArcRel") }} createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoHorizontalAbs") }} createSVGPathSegLinetoHorizontalAbs(in float x)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoHorizontalRel") }} createSVGPathSegLinetoHorizontalRel(in float x)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoVerticalAbs") }} createSVGPathSegLinetoVerticalAbs(in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegLinetoVerticalRel") }} createSVGPathSegLinetoVerticalRel(in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)</code></li>
     <li><code>{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Properties</th>
   <td>
    <ul>
     <li>{{ domxref("SVGAnimatedNumber") }} <code>pathLength</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Normative&nbsp;document</th>
   <td><a class="external" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGPathElement" title="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLength">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Properties">Properties</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Name</th>
   <th>Type</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>pathLength</code></td>
   <td>{{ domxref("SVGAnimatedNumber") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("pathLength") }} on the given {{ SVGElement("path") }} element.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p>&nbsp;</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Name &amp; Arguments</th>
   <th>Return</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><strong><code>getTotalLength</code></strong><code>()</code></td>
   <td>float</td>
   <td>Returns the computed value for the total length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.</td>
  </tr>
  <tr>
   <td><code><strong>getPointAtLength</strong>(in float <em>distance</em>)</code></td>
   <td>{{ domxref("SVGPoint") }}</td>
   <td>Returns the (x,y) coordinate in user space which is distance units along the path, utilizing the browser's distance-along-a-path algorithm.</td>
  </tr>
  <tr>
   <td><code><strong>getPathSegAtLength</strong>(in float <em>distance</em>)</code></td>
   <td>unsigned long</td>
   <td>Returns the index into <code>pathSegList</code> which is <code>distance</code> units along the path, utilizing the user agent's distance-along-a-path algorithm.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegClosePath</strong>()</code></td>
   <td>{{ domxref("SVGPathSegClosePath") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegClosePath") }} object.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegMovetoAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegMovetoAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegMovetoRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegMovetoRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The relative Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The relative Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoCubicAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoCubicAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicAbs") }} object.<br />
    <br />
    Parameters:
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x1</em></code><br />
      The absolute X coordinate for the first control point.</li>
     <li><code>float <em>y1</em></code><br />
      The absolute Y coordinate for the first control point.</li>
     <li><code>float <em>x2</em></code><br />
      The absolute X coordinate for the second control point.</li>
     <li><code>float <em>y2</em></code><br />
      The absolute Y coordinate for the second control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoCubicRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoCubicRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicRel") }} object.<br />
    <br />
    Parameters:
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The relative Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x1</em></code><br />
      The relative X coordinate for the first control point.</li>
     <li><code>float <em>y1</em></code><br />
      The relative Y coordinate for the first control point.</li>
     <li><code>float <em>x2</em></code><br />
      The relative X coordinate for the second control point.</li>
     <li><code>float <em>y2</em></code><br />
      The relative Y coordinate for the second control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoQuadraticAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoQuadraticAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} object.<br />
    <br />
    Parameters:
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x1</em></code><br />
      The absolute X coordinate for the first control point.</li>
     <li><code>float <em>y1</em></code><br />
      The absolute Y coordinate for the first control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoQuadraticRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoQuadraticRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticRel") }} object.<br />
    <br />
    Parameters:
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The relative Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x1</em></code><br />
      The relative X coordinate for the first control point.</li>
     <li><code>float <em>y1</em></code><br />
      The relative Y coordinate for the first control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegArcAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>r1</em>, in float <em>r2</em>, in float <em>angle</em>, in boolean <em>largeArcFlag</em>, in boolean <em>sweepFlag</em>)</code></td>
   <td>{{ domxref("SVGPathSegArcAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegArcAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>r1</em></code><br />
      The x-axis radius for the ellipse.</li>
     <li><code>float <em>r2 </em></code><br />
      The y-axis radius for the ellipse.</li>
     <li><code>float <em>angle </em></code><br />
      The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.</li>
     <li><code>boolean <em>largeArcFlag </em></code><br />
      The value of the large-arc-flag parameter.</li>
     <li><code>boolean <em>sweepFlag </em></code><br />
      The value of the large-arc-flag parameter.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegArcRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>r1</em>, in float <em>r2</em>, in float <em>angle</em>, in boolean <em>largeArcFlag</em>, in boolean <em>sweepFlag</em>)</code></td>
   <td>{{ domxref("SVGPathSegArcRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegArcRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em> </code><br />
      The relative Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>r1</em></code><br />
      The x-axis radius for the ellipse.</li>
     <li><code>float <em>r2 </em></code><br />
      The y-axis radius for the ellipse.</li>
     <li><code>float <em>angle </em></code><br />
      The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.</li>
     <li><code>boolean <em>largeArcFlag </em></code><br />
      The value of the large-arc-flag parameter.</li>
     <li><code>boolean <em>sweepFlag </em></code><br />
      The value of the large-arc-flag parameter.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoHorizontalAbs</strong>(in float <em>x</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoHorizontalAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoHorizontalRel</strong>(in float <em>x</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoHorizontalRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The relative X coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoVerticalAbs</strong>(in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoVerticalAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>y</em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegLinetoVerticalRel</strong>(in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegLinetoVerticalRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>y</em></code><br />
      The relative Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoCubicSmoothAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} object.<br />
    <br />
    Parameters
    <ul>
     <li><code>float <em>x </em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y </em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x2 </em></code><br />
      The absolute X coordinate for the second control point.</li>
     <li><code>float <em>y2 </em></code><br />
      The absolute Y coordinate for the second control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoCubicSmoothRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} object.<br />
    <br />
    Parameters
    <ul>
     <li><code>float <em>x </em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y </em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
     <li><code>float <em>x2 </em></code><br />
      The absolute X coordinate for the second control point.</li>
     <li><code>float <em>y2 </em></code><br />
      The absolute Y coordinate for the second control point.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoQuadraticSmoothAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>createSVGPathSegCurvetoQuadraticSmoothRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }}</td>
   <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} object.<br />
    <br />
    <strong>Parameters:</strong>
    <ul>
     <li><code>float <em>x</em></code><br />
      The absolute X coordinate for the end point of this path segment.</li>
     <li><code>float <em>y</em></code><br />
      The absolute Y coordinate for the end point of this path segment.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>
<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG2')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}[1]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatVersionUnknown}}[1]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}[1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] As required by the latest version of the spec, most of this interface was deprecated in Chrome 47. Removed in Chrome 48. The properties and methods still supported inlcude: <code>getToalLength()</code>, <code>getPointAtLength()</code>, and <code>getPathSegAtLength()</code>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{ SVGElement("path") }} SVG Element</li>
</ul>

Revert to this revision

Name & Arguments	Return	Description
`getTotalLength``()`	float	Returns the computed value for the total length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.
`getPointAtLength(in float distance)`	{{ domxref("SVGPoint") }}	Returns the (x,y) coordinate in user space which is distance units along the path, utilizing the browser's distance-along-a-path algorithm.
`getPathSegAtLength(in float distance)`	unsigned long	Returns the index into `pathSegList` which is `distance` units along the path, utilizing the user agent's distance-along-a-path algorithm.
`createSVGPathSegClosePath()`	{{ domxref("SVGPathSegClosePath") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegClosePath") }} object.
`createSVGPathSegMovetoAbs(in float x, in float y)`	{{ domxref("SVGPathSegMovetoAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegMovetoRel(in float x, in float y)`	{{ domxref("SVGPathSegMovetoRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoAbs(in float x, in float y)`	{{ domxref("SVGPathSegLinetoAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoRel(in float x, in float y)`	{{ domxref("SVGPathSegLinetoRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)`	{{ domxref("SVGPathSegCurvetoCubicAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x1` The absolute X coordinate for the first control point. `float y1` The absolute Y coordinate for the first control point. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)`	{{ domxref("SVGPathSegCurvetoCubicRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float x1` The relative X coordinate for the first control point. `float y1` The relative Y coordinate for the first control point. `float x2` The relative X coordinate for the second control point. `float y2` The relative Y coordinate for the second control point.
`createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)`	{{ domxref("SVGPathSegCurvetoQuadraticAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x1` The absolute X coordinate for the first control point. `float y1` The absolute Y coordinate for the first control point.
`createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)`	{{ domxref("SVGPathSegCurvetoQuadraticRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float x1` The relative X coordinate for the first control point. `float y1` The relative Y coordinate for the first control point.
`createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)`	{{ domxref("SVGPathSegArcAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegArcAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float r1` The x-axis radius for the ellipse. `float r2` The y-axis radius for the ellipse. `float angle` The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system. `boolean largeArcFlag` The value of the large-arc-flag parameter. `boolean sweepFlag` The value of the large-arc-flag parameter.
`createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)`	{{ domxref("SVGPathSegArcRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegArcRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float r1` The x-axis radius for the ellipse. `float r2` The y-axis radius for the ellipse. `float angle` The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system. `boolean largeArcFlag` The value of the large-arc-flag parameter. `boolean sweepFlag` The value of the large-arc-flag parameter.
`createSVGPathSegLinetoHorizontalAbs(in float x)`	{{ domxref("SVGPathSegLinetoHorizontalAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment.
`createSVGPathSegLinetoHorizontalRel(in float x)`	{{ domxref("SVGPathSegLinetoHorizontalRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalAbs(in float y)`	{{ domxref("SVGPathSegLinetoVerticalAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object. Parameters: `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalRel(in float y)`	{{ domxref("SVGPathSegLinetoVerticalRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalRel") }} object. Parameters: `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)`	{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} object. Parameters `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)`	{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} object. Parameters `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)`	{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y)`	{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.