SVGPathElement: getPathSegmentAtLength() method

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

Get path segment

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

<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

Browser compatibility