pathseg

To use the polyfill, add pathseg.js to your server and include it in your HTML or SVG files using a <script> tag. This provides a drop-in replacement for the removed SVGPathSeg, SVGPathSegList, and getPathSegAtLength APIs.

<script src="pathseg.js"></script>

The SVGPathSegList maintains a live connection to the SVGPathElement it belongs to.

1. From DOM to List: The list uses a MutationObserver to watch for changes to the element's d attribute. When the attribute changes, the list internalizes the new segments via _checkPathSynchronizedToList.
2. From List to DOM: Whenever a mutation method is called on the list (like appendItem, removeItem, or replaceItem), the list serializes its internal segments back into a path string and updates the element's d attribute using _writeListToPath.

The polyfill restores the ability to create and manipulate path segments directly on an SVG path element. You can create relative or absolute segments (like createSVGPathSegMovetoRel) and append them to the pathSegList. Modifying the properties of a segment (e.g., x or y) will automatically update the path's d attribute.

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
var moveToSeg = path.createSVGPathSegMovetoRel(10, 10);
var lineToSeg = path.createSVGPathSegLinetoRel(100, 100);
path.pathSegList.appendItem(moveToSeg);
path.pathSegList.appendItem(lineToSeg);
console.log(path.getAttribute('d')); // m 10 10 l 100 100

// Mutating the segment updates the path attribute
moveToSeg.x += 200;
moveToSeg.y += 200;
console.log(path.getAttribute('d')); // m 210 210 l 100 100

To determine how many segments are in an SVGPathSegList, use the numberOfItems property or the length property. Both properties are synchronized with the actual path data.

Note: The length property is provided for compatibility with Firefox 58 behavior.

const list = document.querySelector('path').pathSegList;
console.log(list.numberOfItems); // or list.length

The getPathSegAtLength(distance) method is added to SVGPathElement.prototype. It returns the index of the path segment that contains the specified distance along the path.

Parameters:

• distance: A finite number representing the distance along the path.

Throws:

• Throws an error if distance is undefined or not finite.

const path = document.querySelector('path');
const segmentIndex = path.getPathSegAtLength(50.5);

You can access the list of path segments for an <svg> path element via the pathSegList property on the SVGPathElement prototype. This property returns an SVGPathSegList object representing the segments defined in the element's d attribute.

Note: The following properties are currently implemented as aliases to pathSegList and do not provide distinct functionality:

• normalizedPathSegList
• animatedPathSegList
• animatedNormalizedPathSegList

const pathElement = document.querySelector('path');
const segments = pathElement.pathSegList;
console.log(segments.numberOfItems);

The polyfill adds several createSVGPathSeg* methods to the SVGPathElement.prototype. These methods allow you to programmatically create new path segment objects that can be used to manipulate SVG paths.

Note: The polyfill implementation of these methods currently passes undefined as the owningPathSegList, which may affect synchronization with the parent path element depending on how you use them.

// Example of creating different segment types on an SVG path element
const path = document.querySelector('path');

const moveAbs = path.createSVGPathSegMovetoAbs(10, 20);
const lineAbs = path.createSVGPathSegLinetoAbs(50, 50);
const curveCubicAbs = path.createSVGPathSegCurvetoCubicAbs(100, 100, 120, 120, 150, 150);
const arcAbs = path.createSVGPathSegArcAbs(200, 200, 10, 10, 0, false, true);
const closePath = path.createSVGPathSegClosePath();