SVGPathElement - Web APIs 编辑

The SVGPathElement interface corresponds to the <path> element.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="/wiki/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/en-US/docs/Web/API/SVGElement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="431" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGElement</text></a><polyline points="481,25  491,20  491,30  481,25" stroke="#D4DDE4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#D4DDE4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#D4DDE4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#D4DDE4"/><a xlink:href="/wiki/en-US/docs/Web/API/SVGGraphicsElement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="391" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGraphicsElement</text></a><polyline points="301,89  291,84  291,94  301,89" stroke="#D4DDE4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/wiki/en-US/docs/Web/API/SVGGeometryElement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="171" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGeometryElement</text></a><polyline points="81,89  71,84  71,94  81,89" stroke="#D4DDE4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#D4DDE4"/><a xlink:href="/wiki/en-US/docs/Web/API/SVGPathElement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="-29" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGPathElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

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

Browser compatibility

BCD tables only load in the browser

See also

• <path> SVG Element