← 返回首页
SVGPathElement: getPathSegmentAtLength() method - Web APIs | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Toggle sidebar
  1. Web
  2. Web APIs
  3. SVGPathElement
  4. getPathSegmentAtLength()
Theme
  • OS default
  • Light
  • Dark
English (US)
Remember language Learn more

SVGPathElement: getPathSegmentAtLength() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The getPathSegmentAtLength() method of the SVGPathElement interface returns the path segment at a given distance along the path.

In this article

Syntax

js
getPathSegmentAtLength(distance)

Parameters

distance

A number indicating the distance along the path.

Return value

A path segment object. If no valid segment exists, returns null.

Segment object has the following properties:

type

A path commands.

values

An array or value containing the parameters for the corresponding command.

Examples

Get path segment

Consider the following <path> element, drawing a square:

xml
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"> <path d="M0,0 h64 v64 h-64 z" /> </svg>

The getPathSegmentAtLength() method will return an object that represents the v64 segment that lays 65px along the path:

js
const path = document.querySelector("path"); console.log(path.getPathSegmentAtLength(65)); // Output: path segment // { // type: "v", // values: [64] // }

Specifications

Specification
SVG Paths
# __svg__SVGPathElement__getPathSegmentAtLength

Browser compatibility

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on Jun 23, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content
  1. SVG API
  2. SVGPathElement
  3. Instance properties
    1. pathLength
  4. Instance methods
    1. getPathData()
    2. getPathSegmentAtLength()
    3. getPointAtLength()
    4. getTotalLength()
    5. setPathData()
  5. Inheritance
    1. SVGGeometryElement
    2. SVGGraphicsElement
    3. SVGElement
    4. Element
    5. Node
    6. EventTarget
  6. Related pages for SVG
    1. SVGAElement
    2. SVGAngle
    3. SVGAnimateColorElement
    4. SVGAnimateElement
    5. SVGAnimateMotionElement
    6. SVGAnimateTransformElement
    7. SVGAnimatedAngle
    8. SVGAnimatedBoolean
    9. SVGAnimatedEnumeration
    10. SVGAnimatedInteger
    11. SVGAnimatedLength
    12. SVGAnimatedLengthList
    13. SVGAnimatedNumber
    14. SVGAnimatedNumberList
    15. SVGAnimatedPreserveAspectRatio
    16. SVGAnimatedRect
    17. SVGAnimatedString
    18. SVGAnimatedTransformList
    19. SVGAnimationElement
    20. SVGCircleElement
    21. SVGClipPathElement
    22. SVGComponentTransferFunctionElement
    23. SVGDefsElement
    24. SVGDescElement
    25. SVGDiscardElement
    26. SVGElement
    27. SVGEllipseElement
    28. SVGFEBlendElement
    29. SVGFEColorMatrixElement
    30. SVGFEComponentTransferElement
    31. SVGFECompositeElement
    32. SVGFEConvolveMatrixElement
    33. SVGFEDiffuseLightingElement
    34. SVGFEDisplacementMapElement
    35. SVGFEDistantLightElement
    36. SVGFEDropShadowElement
    37. SVGFEFloodElement
    38. SVGFEFuncAElement
    39. SVGFEFuncBElement
    40. SVGFEFuncGElement
    41. SVGFEFuncRElement
    42. SVGFEGaussianBlurElement
    43. SVGFEImageElement
    44. SVGFEMergeElement
    45. SVGFEMergeNodeElement
    46. SVGFEMorphologyElement
    47. SVGFEOffsetElement
    48. SVGFEPointLightElement
    49. SVGFESpecularLightingElement
    50. SVGFESpotLightElement
    51. SVGFETileElement
    52. SVGFETurbulenceElement
    53. SVGFilterElement
    54. SVGForeignObjectElement
    55. SVGGElement
    56. SVGGradientElement
    57. SVGGraphicsElement
    58. SVGImageElement
    59. SVGLength
    60. SVGLengthList
    61. SVGLineElement
    62. SVGLinearGradientElement
    63. SVGMPathElement
    64. SVGMarkerElement
    65. SVGMaskElement
    66. SVGMetadataElement
    67. SVGNumber
    68. SVGNumberList
    69. SVGPatternElement
    70. SVGPoint
    71. SVGPointList
    72. SVGPolygonElement
    73. SVGPolylineElement
    74. SVGPreserveAspectRatio
    75. SVGRadialGradientElement
    76. SVGRect
    77. SVGRectElement
    78. SVGSVGElement
    79. SVGScriptElement
    80. SVGSetElement
    81. SVGStopElement
    82. SVGStringList
    83. SVGStyleElement
    84. SVGSwitchElement
    85. SVGSymbolElement
    86. SVGTSpanElement
    87. SVGTextContentElement
    88. SVGTextElement
    89. SVGTextPathElement
    90. SVGTextPositioningElement
    91. SVGTitleElement
    92. SVGTransform
    93. SVGTransformList
    94. SVGUnitTypes
    95. SVGUseElement
    96. SVGViewElement
    97. TimeEvent
  7. Guides
    1. SVG

Your blueprint for a better internet.

MDN Contribute Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.