就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. SVGPathElement

在此页

SVGPathElement interface corresponds to the <path> 元素。 

  <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="../API/EventTarget.html" 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="../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="../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="../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="../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="../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="../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;}

注意： In SVG 2 the getPathSegAtLength() and createSVGPathSeg* methods were removed and the pathLength 特性和 getTotalLength() and getPointAtLength() methods were moved to SVGGeometryElement .

特性

This interface also inherits properties from its parent, SVGGeometryElement .

SVGPathElement.pathLength

SVGAnimatedNumber corresponding to the pathLength attribute of the given <path> 元素。

注意： In SVG 2 this property was moved to the SVGGeometryElement interface, from which this interface inherits it.

方法

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.

注意： In SVG 2 this method was moved to the SVGGeometryElement interface, from which this interface inherits it.
SVGPathElement.getPointAtLength()

返回 SVGPoint representing the x and y coordinates in user space utilizing the browser's distance-along-a-path algorithm.

注意： 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 对象。
SVGPathElement.createSVGPathSegMovetoAbs()
Returns a stand-alone, parentless SVGPathSegMovetoAbs 对象。
SVGPathElement.createSVGPathSegMovetoRel()
Returns a stand-alone, parentless SVGPathSegMovetoRel 对象。
SVGPathElement.createSVGPathSegLinetoAbs()
Returns a stand-alone, parentless SVGPathSegLinetoAbs 对象。
SVGPathElement.createSVGPathSegLinetoRel()
Returns a stand-alone, parentless SVGPathSegLinetoRel 对象。
SVGPathElement.createSVGPathSegCurvetoCubicAbs()
Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs 对象。
SVGPathElement.createSVGPathSegCurvetoCubicRel()
Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel 对象。
SVGPathElement.createSVGPathSegCurvetoQuadraticAbs()
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs 对象。
SVGPathElement.createSVGPathSegCurvetoQuadraticRel()
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel 对象。
SVGPathElement.createSVGPathSegArcAbs()
Returns a stand-alone, parentless SVGPathSegArcAbs 对象。
SVGPathElement.createSVGPathSegArcRel()
Returns a stand-alone, parentless SVGPathSegArcRel 对象。
SVGPathElement.createSVGPathSegLinetoHorizontalAbs()
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs 对象。
SVGPathElement.createSVGPathSegLinetoHorizontalRel()
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel 对象。
SVGPathElement.createSVGPathSegLinetoVerticalAbs()
Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs 对象。
SVGPathElement.createSVGPathSegLinetoVerticalRel()
Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel 对象。
SVGPathElement.createSVGPathSegCurvetoCubicSmoothAbs()
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs 对象。
SVGPathElement.createSVGPathSegCurvetoCubicSmoothRel()
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel 对象。
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothAbs()
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs 对象。
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothRel()
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel 对象。

规范

规范 状态 注释
Scalable Vector Graphics (SVG) 2
The definition of 'SVGPathElement' in that specification. 		候选推荐 移除 getPathSegAtLength() and createSVGPathSeg* methods and moved the pathLength 特性和 getTotalLength() and getPointAtLength() 方法到 SVGGeometryElement .
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'SVGPathElement' in that specification. 		推荐 初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
SVGPathElement Chrome Yes Edge 12 Firefox Yes IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
createSVGPathSegArcAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegArcRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegClosePath 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoCubicAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoCubicRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoCubicSmoothAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoCubicSmoothRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoQuadraticAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoQuadraticRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoQuadraticSmoothAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegCurvetoQuadraticSmoothRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoHorizontalAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoHorizontalRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoVerticalAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegLinetoVerticalRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegMovetoAbs 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
createSVGPathSegMovetoRel 弃用 Chrome ? — 48 Edge 12 — 79 Firefox ? IE ? Opera ? — 35 Safari ? WebView Android ? — 48 Chrome Android ? — 48 Firefox Android ? Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0
getPathSegAtLength 弃用 Chrome ? — 62 Edge 12 — 79 Firefox ? IE ? Opera ? — 49 Safari ? WebView Android ? — 62 Chrome Android ? — 62 Firefox Android ? Opera Android ? — 46 Safari iOS ? Samsung Internet Android ? — 8.0
getPointAtLength 弃用 Chrome Yes Edge 12 Firefox Yes
Yes
From version 53, this method is defined on the parent SVGGeometryElement 接口。
IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes
Yes
From version 53, this method is defined on the parent SVGGeometryElement 接口。
Opera Android ? Safari iOS ? Samsung Internet Android Yes
getTotalLength 弃用 Chrome Yes Edge 12 Firefox Yes
Yes
From version 53, this method is defined on the parent SVGGeometryElement 接口。
IE ? Opera Yes Safari No WebView Android Yes Chrome Android Yes Firefox Android Yes
Yes
From version 53, this method is defined on the parent SVGGeometryElement 接口。
Opera Android Yes Safari iOS ? Samsung Internet Android Yes
pathLength 弃用 Chrome ? — 48 Edge No Firefox Yes IE No Opera ? — 35 Safari Yes WebView Android ? — 48 Chrome Android ? — 48 Firefox Android Yes Opera Android ? — 35 Safari iOS ? Samsung Internet Android ? — 5.0

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

另请参阅

元数据

  • 最后修改：
  1. SVGPathElement
  2. 特性
    1. pathLength
  3. 方法
    1. getPointAtLength()
    2. getTotalLength()
  4. 继承：
    1. SVGGeometryElement
    2. SVGGraphicsElement
    3. SVGElement
    4. 元素
    5. 节点
    6. EventTarget
  5. SVG 相关页面
    1. SVGAElement
    2. SVGAltGlyphElement
    3. SVGAngle
    4. SVGAnimateColorElement
    5. SVGAnimateElement
    6. SVGAnimateMotionElement
    7. SVGAnimateTransformElement
    8. SVGAnimatedAngle
    9. SVGAnimatedBoolean
    10. SVGAnimatedEnumeration
    11. SVGAnimatedInteger
    12. SVGAnimatedLength
    13. SVGAnimatedLengthList
    14. SVGAnimatedNumber
    15. SVGAnimatedNumberList
    16. SVGAnimatedPathData
    17. SVGAnimatedPoints
    18. SVGAnimatedPreserveAspectRatio
    19. SVGAnimatedRect
    20. SVGAnimatedString
    21. SVGAnimatedTransformList
    22. SVGAnimationElement
    23. SVGCircleElement
    24. SVGClipPathElement
    25. SVGComponentTransferFunctionElement
    26. SVGCursorElement
    27. SVGDefsElement
    28. SVGDescElement
    29. SVGDocument
    30. SVGElement
    31. SVGEllipseElement
    32. SVGFEBlendElement
    33. SVGFEColorMatrixElement
    34. SVGFEComponentTransferElement
    35. SVGFECompositeElement
    36. SVGFEConvolveMatrixElement
    37. SVGFEDiffuseLightingElement
    38. SVGFEDisplacementMapElement
    39. SVGFEDistantLightElement
    40. SVGFEDropShadowElement
    41. SVGFEFloodElement
    42. SVGFEFuncAElement
    43. SVGFEFuncBElement
    44. SVGFEFuncGElement
    45. SVGFEFuncRElement
    46. SVGFEGaussianBlurElement
    47. SVGFEImageElement
    48. SVGFEMergeElement
    49. SVGFEMergeNodeElement
    50. SVGFEMorphologyElement
    51. SVGFEOffsetElement
    52. SVGFEPointLightElement
    53. SVGFESpecularLightingElement
    54. SVGFESpotLightElement
    55. SVGFETileElement
    56. SVGFETurbulenceElement
    57. SVGFilterElement
    58. SVGFilterPrimitiveStandardAttributes
    59. SVGFitToViewBox
    60. SVGFontElement
    61. SVGFontFaceElement
    62. SVGFontFaceFormatElement
    63. SVGFontFaceNameElement
    64. SVGFontFaceSrcElement
    65. SVGFontFaceUriElement
    66. SVGForeignObjectElement
    67. SVGGElement
    68. SVGGlyphElement
    69. SVGGradientElement
    70. SVGGraphicsElement
    71. SVGHKernElement
    72. SVGImageElement
    73. SVGLength
    74. SVGLengthList
    75. SVGLineElement
    76. SVGLinearGradientElement
    77. SVGMPathElement
    78. SVGMarkerElement
    79. SVGMaskElement
    80. SVGMatrix
    81. SVGMetadataElement
    82. SVGMissingGlyphElement
    83. SVGNumber
    84. SVGNumberList
    85. SVGPathSeg
    86. SVGPathSegArcAbs
    87. SVGPathSegArcRel
    88. SVGPathSegClosePath
    89. SVGPathSegCurvetoCubicAbs
    90. SVGPathSegCurvetoCubicRel
    91. SVGPathSegCurvetoCubicSmoothAbs
    92. SVGPathSegCurvetoCubicSmoothRel
    93. SVGPathSegCurvetoQuadraticAbs
    94. SVGPathSegCurvetoQuadraticRel
    95. SVGPathSegCurvetoQuadraticSmoothAbs
    96. SVGPathSegCurvetoQuadraticSmoothRel
    97. SVGPathSegLinetoAbs
    98. SVGPathSegLinetoHorizontalAbs
    99. SVGPathSegLinetoHorizontalRel
    100. SVGPathSegLinetoRel
    101. SVGPathSegLinetoVerticalAbs
    102. SVGPathSegLinetoVerticalRel
    103. SVGPathSegList
    104. SVGPathSegMovetoAbs
    105. SVGPathSegMovetoRel
    106. SVGPatternElement
    107. SVGPoint
    108. SVGPointList
    109. SVGPolygonElement
    110. SVGPolylineElement
    111. SVGPreserveAspectRatio
    112. SVGRadialGradientElement
    113. SVGRect
    114. SVGRectElement
    115. SVGSVGElement
    116. SVGScriptElement
    117. SVGSetElement
    118. SVGStopElement
    119. SVGStringList
    120. SVGStylable
    121. SVGStyleElement
    122. SVGSwitchElement
    123. SVGSymbolElement
    124. SVGTRefElement
    125. SVGTSpanElement
    126. SVGTests
    127. SVGTextContentElement
    128. SVGTextElement
    129. SVGTextPathElement
    130. SVGTextPositioningElement
    131. SVGTitleElement
    132. SVGTransform
    133. SVGTransformList
    134. SVGTransformable
    135. SVGURIReference
    136. SVGUnitTypes
    137. SVGUseElement
    138. SVGVKernElement
    139. SVGViewElement
    140. SVGZoomAndPan
    141. SVGZoomEvent
    142. TimeEvent

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1