Web/API/SVGPathElement

The SVGPathElement interface corresponds to the <path> element.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGElement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="431" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGElement</text></a><polyline points="481,25  491,20  491,30  481,25" stroke="#D4DDE4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#D4DDE4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#D4DDE4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="391" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGraphicsElement</text></a><polyline points="301,89  291,84  291,94  301,89" stroke="#D4DDE4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="171" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGeometryElement</text></a><polyline points="81,89  71,84  71,94  81,89" stroke="#D4DDE4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="-29" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGPathElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Note: In SVG 2 the getPathSegAtLength() and createSVGPathSeg* methods were removed and the pathLength property and the getTotalLength() and getPointAtLength() methods were moved to SVGGeometryElement.

Properties

This interface also inherits properties from its parent, SVGGeometryElement.

SVGPathElement.pathLength '

An SVGAnimatedNumber corresponding to the pathLength attribute of the given <path> element.

Note: In SVG 2 this property was moved to the SVGGeometryElement interface, from which this interface inherits it.

Methods

This interface also inherits methods from its parent, SVGGeometryElement.

SVGPathElement.getTotalLength() '

Returns a float representing 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.

Note: In SVG 2 this method was moved to the SVGGeometryElement interface, from which this interface inherits it.

SVGPathElement.getPointAtLength() '

Returns an SVGPoint representing the x and y coordinates in user space utilizing the browser's distance-along-a-path algorithm.

Note: In SVG 2 this method was moved to the SVGGeometryElement interface, from which this interface inherits it.

SVGPathElement.getPathSegAtLength() '

Returns an unsigned long representing the index within the pathSegList utilizing the user agent's distance-along-a-path algorithm.

SVGPathElement.createSVGPathSegClosePath() '

Returns a stand-alone, parentless SVGPathSegClosePath object.

SVGPathElement.createSVGPathSegMovetoAbs()  '

Returns a stand-alone, parentless SVGPathSegMovetoAbs object.

SVGPathElement.createSVGPathSegMovetoRel()  '

Returns a stand-alone, parentless SVGPathSegMovetoRel object.

SVGPathElement.createSVGPathSegLinetoAbs()  '

Returns a stand-alone, parentless SVGPathSegLinetoAbs object.

SVGPathElement.createSVGPathSegLinetoRel()  '

Returns a stand-alone, parentless SVGPathSegLinetoRel object.

SVGPathElement.createSVGPathSegCurvetoCubicAbs()  '

Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs object.

SVGPathElement.createSVGPathSegCurvetoCubicRel()  '

Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel object.

SVGPathElement.createSVGPathSegCurvetoQuadraticAbs()  '

Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.

SVGPathElement.createSVGPathSegCurvetoQuadraticRel()  '

Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.

SVGPathElement.createSVGPathSegArcAbs()  '

Returns a stand-alone, parentless SVGPathSegArcAbs object.

SVGPathElement.createSVGPathSegArcRel()  '

Returns a stand-alone, parentless SVGPathSegArcRel object.

SVGPathElement.createSVGPathSegLinetoHorizontalAbs()  '

Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.

SVGPathElement.createSVGPathSegLinetoHorizontalRel()  '

Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel object.

SVGPathElement.createSVGPathSegLinetoVerticalAbs()  '

Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs object.

SVGPathElement.createSVGPathSegLinetoVerticalRel()  '

Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel object.

SVGPathElement.createSVGPathSegCurvetoCubicSmoothAbs()  '

Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.

SVGPathElement.createSVGPathSegCurvetoCubicSmoothRel()  '

Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.

SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothAbs()  '

Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.

SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothRel()  '

Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of 'SVGPathElement' in that specification.	Candidate Recommendation	Removed the getPathSegAtLength() and createSVGPathSeg* methods and moved the pathLength property and the getTotalLength() and getPointAtLength() methods to SVGGeometryElement.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'SVGPathElement' in that specification.	Recommendation	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
SVGPathElement	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
createSVGPathSegArcAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegArcRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegClosePath Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoCubicAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoCubicRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoCubicSmoothAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoCubicSmoothRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoQuadraticAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoQuadraticRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoQuadraticSmoothAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegCurvetoQuadraticSmoothRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoHorizontalAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoHorizontalRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoVerticalAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegLinetoVerticalRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegMovetoAbs Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
createSVGPathSegMovetoRel Deprecated'	Chrome No support ? — 48	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 35	Safari ?	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android ?	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0
getPathSegAtLength Deprecated'	Chrome No support ? — 62	Edge No support 12 — 79	Firefox ?	IE ?	Opera No support ? — 49	Safari ?	WebView Android No support ? — 62	Chrome Android No support ? — 62	Firefox Android ?	Opera Android No support ? — 46	Safari iOS ?	Samsung Internet Android No support ? — 8.0
getPointAtLength Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes Notes' Full support Yes Notes' Notes' From version 53, this method is defined on the parent SVGGeometryElement interface.	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Notes' Full support Yes Notes' Notes' From version 53, this method is defined on the parent SVGGeometryElement interface.	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
getTotalLength Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes Notes' Full support Yes Notes' Notes' From version 53, this method is defined on the parent SVGGeometryElement interface.	IE ?	Opera Full support Yes	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Notes' Full support Yes Notes' Notes' From version 53, this method is defined on the parent SVGGeometryElement interface.	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
pathLength Deprecated'	Chrome No support ? — 48	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support ? — 35	Safari Full support Yes	WebView Android No support ? — 48	Chrome Android No support ? — 48	Firefox Android Full support Yes	Opera Android No support ? — 35	Safari iOS ?	Samsung Internet Android No support ? — 5.0

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

Deprecated. Not for use in new websites.'

Deprecated. Not for use in new websites.

See implementation notes.'

See implementation notes.

See also

• <path> SVG Element

SVGPathElement by Mozilla Contributors is licensed under CC-BY-SA 2.5.