MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    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.

     

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support ? ? ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support Not supported ? ? ? ?

    See also

    Document Tags and Contributors

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