SVGPointList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The SVGPointList interface represents a list of DOMPoint objects.
An SVGPointList can be designated as read-only, which means that attempts to modify the object will result in an exception being thrown.
An SVGPointList object is indexable and can be accessed like an array using bracket notation. Reading an index is equivalent to calling getItem(). Assigning to an index is equivalent to calling replaceItem(), including the exceptions it throws.
Instance properties
SVGPointList.lengthRead only-
Returns the number of points in the list.
SVGPointList.numberOfItemsRead 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.
<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>
const example = document.getElementById("example");
console.log(example.points); // An SVGPointList
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGPointList |