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>
js
let example = document.getElementById("example");
console.log(example.points); //an SVGPointList

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGPointList

Browser compatibility

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGPointList
appendItem
clear
getItem
initialize
insertItemBefore
length
numberOfItems
removeItem
replaceItem