Web/API/SVGPathElement

From Get docs


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

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