SVGLengthList
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die Schnittstelle SVGLengthList 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 festgelegt werden. Das bedeutet, dass Versuche, das Objekt zu ändern, zum Auslösen einer Ausnahme führen.
Ein SVGLengthList-Objekt ist indexierbar und kann mithilfe der Klammernotation wie ein Array aufgerufen werden. Das Lesen eines Index entspricht dem Aufruf von getItem(). Das Zuweisen zu einem Index entspricht dem Aufruf von replaceItem(), einschließlich der dadurch ausgelösten Ausnahmen.
Instanzeigenschaften
length-
Die Anzahl der Elemente in der Liste.
numberOfItems-
Die Anzahl der Elemente in der Liste.
Instanzmethoden
appendItem()-
Fügt ein neues Element am Ende der Liste ein.
clear()-
Entfernt alle vorhandenen Elemente aus der Liste, sodass eine leere Liste entsteht.
initialize()-
Entfernt alle vorhandenen Elemente aus der Liste und initialisiert die Liste erneut, sodass sie das einzelne durch den Parameter angegebene Element enthält.
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 aus einem SVGAnimatedLengthList-Objekt abgerufen werden, das seinerseits aus 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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |