SVGLengthList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die SVGLengthList-Schnittstelle definiert eine Liste von SVGLength-Objekten. Sie wird für die Eigenschaften baseVal und animVal von SVGAnimatedLengthList verwendet.
Ein SVGLengthList-Objekt kann als schreibgeschützt bezeichnet werden, was bedeutet, dass Versuche, das Objekt zu ändern, zu einer Ausnahme führen.
Ein SVGLengthList-Objekt ist indexierbar und kann wie ein Array zugegriffen werden.
Instanz-Eigenschaften
length-
Die Anzahl der Elemente in der Liste.
numberOfItems-
Die Anzahl der Elemente in der Liste.
Instanz-Methoden
appendItem()-
Fügt ein neues Element am Ende der Liste hinzu.
clear()-
Löscht alle vorhandenen Elemente aus der Liste, sodass das Ergebnis eine leere Liste ist.
initialize()-
Löscht alle vorhandenen Elemente aus der Liste und initialisiert die Liste neu, um das durch den Parameter angegebene einzelne Element zu halten.
getItem()-
Gibt das angegebene Element aus der Liste zurück.
insertItemBefore()-
Fügt ein neues Element an der angegebenen Position in die Liste ein.
removeItem()-
Entfernt ein vorhandenes Element aus der Liste.
replaceItem()-
Ersetzt ein vorhandenes Element in der Liste durch ein neues Element.
Beispiele
Verwendung von SVGLengthList
Ein SVGLengthList-Objekt kann von einem SVGAnimatedLengthList-Objekt abgerufen werden, das selbst von vielen animierbaren Längenattributen wie SVGTextPositioningElement.x abgerufen werden kann.
HTML
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" width="200" height="100"> <text id="text1" x="10" y="50">Hello</text> </svg> <button id="equally-distribute">Equally distribute letters</button> <button id="reset-spacing">Reset spacing</button> <div> <b>Current <code>SVGLengthList</code></b> <pre><output id="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); Ergebnis
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |