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.
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:
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
getPathSegmentAtLength
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.