Your Search Results

SVGPathElement

In This Article

SVG path interface
1. Interface overview
Properties
Methods
Specifications
Browser compatibility
See also

SVG path interface

The SVGPathElement interface corresponds to the <path> element.

Interface overview

Also implement	`SVGElement`, `SVGTests`, `SVGLangSpace`, `SVGExternalResourcesRequired`, `SVGStylable`, `SVGTransformable`, `SVGAnimatedPathData`
Methods	`float getTotalLength()` `SVGPoint getPointAtLength(in float distance)` `unsigned long getPathSegAtLength(in float distance)` `SVGPathSegClosePath createSVGPathSegClosePath()` `SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y)` `SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y)` `SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y)` `SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y)` `SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)` `SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)` `SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x)` `SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x)` `SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y)` `SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y)` `SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)` `SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)` `SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)` `SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);`
Properties	`SVGAnimatedNumber` `pathLength`
Normative document	SVG 1.1 (2nd Edition)

Properties

Name	Type	Description
`pathLength`	`SVGAnimatedNumber`	Corresponds to attribute `pathLength` on the given `<path>` element.

Methods

Name & Arguments	Return	Description
`getTotalLength``()`	float	Returns 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.
`getPointAtLength(in float distance)`	`SVGPoint`	Returns the (x,y) coordinate in user space which is distance units along the path, utilizing the browser's distance-along-a-path algorithm.
`getPathSegAtLength(in float distance)`	unsigned long	Returns the index into `pathSegList` which is `distance` units along the path, utilizing the user agent's distance-along-a-path algorithm.
`createSVGPathSegClosePath()`	`SVGPathSegClosePath`	Returns a stand-alone, parentless `SVGPathSegClosePath` object.
`createSVGPathSegMovetoAbs(in float x, in float y)`	`SVGPathSegMovetoAbs`	Returns a stand-alone, parentless `SVGPathSegMovetoAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegMovetoRel(in float x, in float y)`	`SVGPathSegMovetoRel`	Returns a stand-alone, parentless `SVGPathSegMovetoRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoAbs(in float x, in float y)`	`SVGPathSegLinetoAbs`	Returns a stand-alone, parentless `SVGPathSegLinetoAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoRel(in float x, in float y)`	`SVGPathSegLinetoRel`	Returns a stand-alone, parentless `SVGPathSegLinetoRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)`	`SVGPathSegCurvetoCubicAbs`	Returns a stand-alone, parentless `SVGPathSegCurvetoCubicAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x1` The absolute X coordinate for the first control point. `float y1` The absolute Y coordinate for the first control point. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)`	`SVGPathSegCurvetoCubicRel`	Returns a stand-alone, parentless `SVGPathSegCurvetoCubicRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float x1` The relative X coordinate for the first control point. `float y1` The relative Y coordinate for the first control point. `float x2` The relative X coordinate for the second control point. `float y2` The relative Y coordinate for the second control point.
`createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)`	`SVGPathSegCurvetoQuadraticAbs`	Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x1` The absolute X coordinate for the first control point. `float y1` The absolute Y coordinate for the first control point.
`createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)`	`SVGPathSegCurvetoQuadraticRel`	Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float x1` The relative X coordinate for the first control point. `float y1` The relative Y coordinate for the first control point.
`createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)`	`SVGPathSegArcAbs`	Returns a stand-alone, parentless `SVGPathSegArcAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float r1` The x-axis radius for the ellipse. `float r2` The y-axis radius for the ellipse. `float angle` The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system. `boolean largeArcFlag` The value of the large-arc-flag parameter. `boolean sweepFlag` The value of the large-arc-flag parameter.
`createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)`	`SVGPathSegArcRel`	Returns a stand-alone, parentless `SVGPathSegArcRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment. `float y` The relative Y coordinate for the end point of this path segment. `float r1` The x-axis radius for the ellipse. `float r2` The y-axis radius for the ellipse. `float angle` The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system. `boolean largeArcFlag` The value of the large-arc-flag parameter. `boolean sweepFlag` The value of the large-arc-flag parameter.
`createSVGPathSegLinetoHorizontalAbs(in float x)`	`SVGPathSegLinetoHorizontalAbs`	Returns a stand-alone, parentless `SVGPathSegLinetoHorizontalAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment.
`createSVGPathSegLinetoHorizontalRel(in float x)`	`SVGPathSegLinetoHorizontalRel`	Returns a stand-alone, parentless `SVGPathSegLinetoHorizontalRel` object. Parameters: `float x` The relative X coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalAbs(in float y)`	`SVGPathSegLinetoVerticalAbs`	Returns a stand-alone, parentless `SVGPathSegLinetoVerticalAbs` object. Parameters: `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalRel(in float y)`	`SVGPathSegLinetoVerticalRel`	Returns a stand-alone, parentless `SVGPathSegLinetoVerticalRel` object. Parameters: `float y` The relative Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)`	`SVGPathSegCurvetoCubicSmoothAbs`	Returns a stand-alone, parentless `SVGPathSegCurvetoCubicSmoothAbs` object. Parameters `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)`	`SVGPathSegCurvetoCubicSmoothRel`	Returns a stand-alone, parentless `SVGPathSegCurvetoCubicSmoothRel` object. Parameters `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment. `float x2` The absolute X coordinate for the second control point. `float y2` The absolute Y coordinate for the second control point.
`createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)`	`SVGPathSegCurvetoQuadraticSmoothAbs`	Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticSmoothAbs` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y)`	`SVGPathSegCurvetoQuadraticSmoothRel`	Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticSmoothRel` object. Parameters: `float x` The absolute X coordinate for the end point of this path segment. `float y` The absolute Y coordinate for the end point of this path segment.

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)	Recommendation	Initial definition.
Scalable Vector Graphics (SVG) 2	Working Draft	Initial definition.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)[1]	?	?	?	?

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	Not supported	(Yes)[1]	?	?	?	?	(Yes)[1]

[1] As required by the latest version of the spec, most of this interface was deprecated in Chrome 47. Removed in Chrome 48. The properties and methods still supported inlcude: getTotalLength(), getPointAtLength(), and getPathSegAtLength().

Document Tags and Contributors

Tags:

Contributors to this page: szupie, jpmedley, fscholz, mehmetaergun, Naesten, kscarfone, Sheppy, Jeremie

Last updated by: szupie, Jan 19, 2016, 9:53:47 AM