SVGPathElement

SVG path interface

The SVGPathElement interface corresponds to the <path> element.

Interface overview

Also implement SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGAnimatedPathData
Methods
Properties
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.

Browser compatibility

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

See also

Document Tags and Contributors

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