SVGLengthList
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.
TheSVGLengthList interface defines a list ofSVGLength objects. It is used for thebaseVal andanimVal properties ofSVGAnimatedLengthList.
AnSVGLengthList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
AnSVGLengthList object is indexable and can be accessed like an array.
Instance properties
lengthThe number of items in the list.
numberOfItemsThe number of items in the list.
Instance methods
appendItem()Inserts a new item at the end of the list.
clear()Clears all existing items from the list, with the result being an empty list.
initialize()Clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter.
getItem()Returns the specified item from the list.
insertItemBefore()Inserts a new item into the list at the specified position.
removeItem()Removes an existing item from the list.
replaceItem()Replaces an existing item in the list with a new item.
Examples
Using SVGLengthList
AnSVGLengthList object can be retrieved from anSVGAnimatedLengthList object, which itself is retrievable from many animatable length attributes, such asSVGTextPositioningElement.x.
HTML
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" width="200" height="100"> <text x="10" y="50">Hello</text></svg><button>Equally distribute letters</button><button>Reset spacing</button><div> <b>Current <code>SVGLengthList</code></b> <pre><output></output></pre></div>JavaScript
const text = document.getElementById("text1");const output = document.getElementById("output");const list = text.x.baseVal;function equallyDistribute() { list.clear(); for (let i = 0; i < text.textContent.length; i++) { const length = text.ownerSVGElement.createSVGLength(); length.value = i * 20 + 10; list.appendItem(length); } printList();}function resetSpacing() { const length = text.ownerSVGElement.createSVGLength(); length.value = 10; list.initialize(length); printList();}function printList() { output.textContent = ""; for (let i = 0; i < list.length; i++) { output.innerText += `${list.getItem(i).value}\n`; }}printList();document .getElementById("equally-distribute") .addEventListener("click", equallyDistribute);document .getElementById("reset-spacing") .addEventListener("click", resetSpacing);Result
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |