The SVGPathElement interface corresponds to the <path> element.

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) 2
The 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
pathLength
Deprecated
Chrome No support ? — 48Edge No support NoFirefox Full support YesIE No support NoOpera No support ? — 35Safari Full support YesWebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile No support NoFirefox Android Full support YesOpera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegArcAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegArcRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegClosePath
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoCubicAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoCubicRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoCubicSmoothAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoCubicSmoothRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoQuadraticAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoQuadraticRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoQuadraticSmoothAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegCurvetoQuadraticSmoothRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoHorizontalAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoHorizontalRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoVerticalAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegLinetoVerticalRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegMovetoAbs
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
createSVGPathSegMovetoRel
Deprecated
Chrome No support ? — 48Edge ? Firefox ? IE ? Opera No support ? — 35Safari ? WebView Android No support ? — 48Chrome Android No support ? — 48Edge Mobile ? Firefox Android ? Opera Android No support ? — 35Safari iOS ? Samsung Internet Android ?
getTotalLength
Deprecated
Chrome Full support YesEdge ? 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 YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile ? 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 YesSafari iOS ? Samsung Internet Android ?
getPointAtLength
Deprecated
Chrome Full support YesEdge ? 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 YesOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile ? 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 ?
getPathSegAtLength
Deprecated
Chrome No support ? — 62Edge ? Firefox ? IE ? Opera No support ? — 49Safari ? WebView Android No support ? — 62Chrome Android No support ? — 62Edge Mobile ? Firefox Android ? Opera Android No support ? — 49Safari iOS ? Samsung Internet Android ?

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

Document Tags and Contributors

Last updated by: fscholz,