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

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

undefined

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:

const path = document.querySelector("path");

console.log(path.getPathSegmentAtLength(65));

// Output: path segment
// {
//   type: "v",
//   values: [64]
// }

Specifications

SVG Paths