SVGPointList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The SVGPointList interface represents a list of SVGPoint objects.

An SVGPointList can be designated as read-only, which means that attempts to modify the object will result in an exception being thrown.

Instance properties

SVGPointList.length Read only: Returns the number of points in the list.
SVGPointList.numberOfItems Read only: Returns the number of points in the list.

Instance methods

SVGPointList.clear(): Removes all items in the list.
SVGPointList.initialize(): First removes all items in the list, then adds a single value to the list.
SVGPointList.getItem(): Gets an item from the list at a specified position.
SVGPointList.insertItemBefore(): Inserts an element into the list at a specified position.
SVGPointList.replaceItem(): Replaces an item in the list with a new item.
SVGPointList.removeItem(): Removes an item from the list.
SVGPointList.appendItem(): Adds an item to the end of the list.

Examples

The following example shows an SVG which contains a <polyline> with five coordinate pairs. The points property returns an SVGPointList.

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <polyline
    id="example"
    stroke="black"
    fill="none"
    points="50,0 21,90 98,35 2,35 79,90" />
</svg>

let example = document.getElementById("example");
console.log(example.points); //an SVGPointList

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGPointList

Browser compatibility

BCD tables only load in the browser