W3cubDocs

SVGPathElement

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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	Yes	Yes	Yes	Yes	Yes
`pathLength`	? — 48	No	Yes	No	? — 35	Yes
`createSVGPathSegArcAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegArcRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegClosePath`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoCubicAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoCubicRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoCubicSmoothAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoCubicSmoothRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoQuadraticAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoQuadraticRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoQuadraticSmoothAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegCurvetoQuadraticSmoothRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoHorizontalAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoHorizontalRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoVerticalAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegLinetoVerticalRel`	? — 48	?	?	?	? — 35	?
`createSVGPathSegMovetoAbs`	? — 48	?	?	?	? — 35	?
`createSVGPathSegMovetoRel`	? — 48	?	?	?	? — 35	?
`getTotalLength`	Yes	?	Yes Yes From version 53, this method is defined on the parent `SVGGeometryElement` interface.	?	Yes	No
`getPointAtLength`	Yes	?	Yes Yes From version 53, this method is defined on the parent `SVGGeometryElement` interface.	Yes	Yes	No
`getPathSegAtLength`	? — 62	?	?	?	? — 49	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	Yes	Yes	Yes	Yes	?
`pathLength`	? — 48	? — 48	No	Yes	? — 35	?	?
`createSVGPathSegArcAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegArcRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegClosePath`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoCubicAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoCubicRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoCubicSmoothAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoCubicSmoothRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoQuadraticAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoQuadraticRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoQuadraticSmoothAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegCurvetoQuadraticSmoothRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoHorizontalAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoHorizontalRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoVerticalAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegLinetoVerticalRel`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegMovetoAbs`	? — 48	? — 48	?	?	? — 35	?	?
`createSVGPathSegMovetoRel`	? — 48	? — 48	?	?	? — 35	?	?
`getTotalLength`	Yes	Yes	?	Yes Yes From version 53, this method is defined on the parent `SVGGeometryElement` interface.	Yes	?	?
`getPointAtLength`	Yes	Yes	?	Yes Yes From version 53, this method is defined on the parent `SVGGeometryElement` interface.	?	?	?
`getPathSegAtLength`	? — 62	? — 62	?	?	? — 49	?	?

SVGPathElement

Properties

Methods

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also