--- title: SVGPathElement slug: Web/API/SVGPathElement tags: - API - SVG - SVG DOM - 参考 - 需要兼容性表 - 需要示例 translation_of: Web/API/SVGPathElement ---

SVG path interface

SVGPathElement接口对应于{{ SVGElement("path") }}元素。

接口概览

又作用于	{{ domxref("SVGElement") }}、 {{ domxref("SVGTests") }}、 {{ domxref("SVGLangSpace") }}、 {{ domxref("SVGExternalResourcesRequired") }}、 {{ domxref("SVGStylable") }}、 {{ domxref("SVGTransformable") }}、 {{ domxref("SVGAnimatedPathData") }}
方法	`float getTotalLength()` `{{ domxref("SVGPoint") }} getPointAtLength(in float distance)` `unsigned long getPathSegAtLength(in float distance)` `{{ domxref("SVGPathSegClosePath") }} createSVGPathSegClosePath()` `{{ domxref("SVGPathSegMovetoAbs") }} createSVGPathSegMovetoAbs(in float x, in float y)` `{{ domxref("SVGPathSegMovetoRel") }} createSVGPathSegMovetoRel(in float x, in float y)` `{{ domxref("SVGPathSegLinetoAbs") }} createSVGPathSegLinetoAbs(in float x, in float y)` `{{ domxref("SVGPathSegLinetoRel") }} createSVGPathSegLinetoRel(in float x, in float y)` `{{ domxref("SVGPathSegCurvetoCubicAbs") }} createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoCubicRel") }} createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoQuadraticAbs") }} createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)` `{{ domxref("SVGPathSegCurvetoQuadraticRel") }} createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)` `{{ domxref("SVGPathSegArcAbs") }} createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `{{ domxref("SVGPathSegArcRel") }} createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)` `{{ domxref("SVGPathSegLinetoHorizontalAbs") }} createSVGPathSegLinetoHorizontalAbs(in float x)` `{{ domxref("SVGPathSegLinetoHorizontalRel") }} createSVGPathSegLinetoHorizontalRel(in float x)` `{{ domxref("SVGPathSegLinetoVerticalAbs") }} createSVGPathSegLinetoVerticalAbs(in float y)` `{{ domxref("SVGPathSegLinetoVerticalRel") }} createSVGPathSegLinetoVerticalRel(in float y)` `{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)` `{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)` `{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);`
属性	{{ domxref("SVGAnimatedNumber") }} `pathLength`
规范文档	SVG 1.1 (2nd Edition)

属性

名称	类型	描述
`pathLength`	{{ domxref("SVGAnimatedNumber") }}	对应于给定{{ SVGElement("path") }}元素的{{ SVGAttr("pathLength") }}属性。

方法

浏览器兼容性

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

参见

{{ SVGElement("path") }} SVG Element

名称和参数	返回	描述
`getTotalLength``()`	浮点数	返回用浏览器的 distance-along-a-path 算法计算得出的路径全长，匹配当前用户坐标系中的长度。
`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)`	无符号长整型	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: `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)`	{{ domxref("SVGPathSegMovetoRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegLinetoAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegLinetoRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoCubicAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoCubicRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoQuadraticAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoQuadraticRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegArcAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegArcRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegLinetoHorizontalAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object. Parameters: `float x` The absolute X coordinate for the end point of this path segment.
`createSVGPathSegLinetoHorizontalRel(in float x)`	{{ domxref("SVGPathSegLinetoHorizontalRel") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object. Parameters: `float x` The relative X coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalAbs(in float y)`	{{ domxref("SVGPathSegLinetoVerticalAbs") }}	Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object. Parameters: `float y` The absolute Y coordinate for the end point of this path segment.
`createSVGPathSegLinetoVerticalRel(in float y)`	{{ domxref("SVGPathSegLinetoVerticalRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }}	Returns a stand-alone, parentless {{ domxref("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)`	{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }}	Returns a stand-alone, parentless {{ domxref("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.