SVGPathElement

SVGPathElement interface corresponds to the <path> 元素。

注意: In SVG 2 the getPathSegAtLength() and createSVGPathSeg* methods were removed and the pathLength property and the getTotalLength() and getPointAtLength() methods were moved to SVGGeometryElement .

特性

This interface also inherits properties from its parent, SVGGeometryElement .

SVGPathElement.pathLength

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

Returns an 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 对象。

规范

规范 状态 Comment
Scalable Vector Graphics (SVG) 2
The definition of 'SVGPathElement' in that specification.
候选推荐 Removed the getPathSegAtLength() and createSVGPathSeg* methods and moved the pathLength property and the getTotalLength() and getPointAtLength() methods to SVGGeometryElement .
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'SVGPathElement' in that specification.
Recommendation 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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. Element
    5. Node
    6. EventTarget
  5. Related pages for 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