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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
pathLength Yes — 48 No Yes No Yes — 35 Yes
createSVGPathSegArcAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegArcRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegClosePath Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoCubicAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoCubicRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoCubicSmoothAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoCubicSmoothRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoQuadraticAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoQuadraticRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoQuadraticSmoothAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegCurvetoQuadraticSmoothRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoHorizontalAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoHorizontalRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoVerticalAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegLinetoVerticalRel Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegMovetoAbs Yes — 48 ? ? ? Yes — 35 ?
createSVGPathSegMovetoRel Yes — 48 ? ? ? Yes — 35 ?
getTotalLength Yes ? Yes — 531 ? Yes No
getPointAtLength Yes ? Yes — 531 Yes Yes No
getPathSegAtLength Yes — 62 ? ? ? Yes — 49 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes ?
pathLength Yes — 48 Yes — 48 No Yes Yes — 35 ? ?
createSVGPathSegArcAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegArcRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegClosePath Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoCubicAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoCubicRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoCubicSmoothAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoCubicSmoothRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoQuadraticAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoQuadraticRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoQuadraticSmoothAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegCurvetoQuadraticSmoothRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoHorizontalAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoHorizontalRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoVerticalAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegLinetoVerticalRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegMovetoAbs Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
createSVGPathSegMovetoRel Yes — 48 Yes — 48 ? ? Yes — 35 ? ?
getTotalLength Yes Yes ? Yes — 53 Yes ? ?
getPointAtLength Yes Yes ? Yes — 53 ? ? ?
getPathSegAtLength Yes — 62 Yes — 62 ? ? Yes — 49 ? ?

1. This method is currently only supported on <path> elements (where it was already supported in earlier Firefox versions through the SVGPathElement interface). Support for other elements will be added in bug 1325320.

See also

Document Tags and Contributors

Last updated by: fscholz,