SVG path interface
The SVGPathElement
interface corresponds to the {{ SVGElement("path") }} element.
Interface overview
Also implement | {{ domxref("SVGElement") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}, {{ domxref("SVGAnimatedPathData") }} |
---|---|
Methods |
|
Properties |
|
Normative document | SVG 1.1 (2nd Edition) |
Properties
Name | Type | Description |
---|---|---|
pathLength | {{ domxref("SVGAnimatedNumber") }} | Corresponds to attribute {{ SVGAttr("pathLength") }} on the given {{ SVGElement("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) | {{ domxref("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() | {{ domxref("SVGPathSegClosePath") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegClosePath") }} object. |
createSVGPathSegMovetoAbs(in float x, in float y) | {{ domxref("SVGPathSegMovetoAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoAbs") }} object. Parameters:
|
createSVGPathSegMovetoRel(in float x, in float y) | {{ domxref("SVGPathSegMovetoRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoRel") }} object. Parameters:
|
createSVGPathSegLinetoAbs(in float x, in float y) | {{ domxref("SVGPathSegLinetoAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoAbs") }} object. Parameters:
|
createSVGPathSegLinetoRel(in float x, in float y) | {{ domxref("SVGPathSegLinetoRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoRel") }} object. Parameters:
|
createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2) | {{ domxref("SVGPathSegCurvetoCubicAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicAbs") }} object. Parameters:
|
createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2) | {{ domxref("SVGPathSegCurvetoCubicRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicRel") }} object. Parameters:
|
createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1) | {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} object. Parameters:
|
createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1) | {{ domxref("SVGPathSegCurvetoQuadraticRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticRel") }} object. Parameters:
|
createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag) | {{ domxref("SVGPathSegArcAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegArcAbs") }} object. Parameters:
|
createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag) | {{ domxref("SVGPathSegArcRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegArcRel") }} object. Parameters:
|
createSVGPathSegLinetoHorizontalAbs(in float x) | {{ domxref("SVGPathSegLinetoHorizontalAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object. Parameters:
|
createSVGPathSegLinetoHorizontalRel(in float x) | {{ domxref("SVGPathSegLinetoHorizontalRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object. Parameters:
|
createSVGPathSegLinetoVerticalAbs(in float y) | {{ domxref("SVGPathSegLinetoVerticalAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object. Parameters:
|
createSVGPathSegLinetoVerticalRel(in float y) | {{ domxref("SVGPathSegLinetoVerticalRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalRel") }} object. Parameters:
|
createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2) | {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} object. Parameters
|
createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2) | {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} object. Parameters
|
createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y) | {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} object. Parameters:
|
createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y) | {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} | Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} object. Parameters:
|
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{ CompatNo() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
See also
- {{ SVGElement("path") }} SVG Element