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 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 gekennzeichnet sein. Versuche, das Objekt zu ändern, lösen dann eine Ausnahme aus.
Ein SVGLengthList-Objekt kann über Indizes angesprochen werden. Sie können wie bei einem Array mit der Klammernotation darauf zugreifen. Das Lesen eines Elements über seinen Index entspricht einem Aufruf von getItem(). Eine Zuweisung über einen Index entspricht einem Aufruf von replaceItem(), einschließlich der dabei ausgelösten Ausnahmen.
Instanzeigenschaften
lengthSchreibgeschützt-
Die Anzahl der Einträge in der Liste.
numberOfItemsSchreibgeschützt-
Die Anzahl der Einträge in der Liste.
Instanzmethoden
appendItem()-
Fügt am Ende der Liste einen neuen Eintrag hinzu.
clear()-
Entfernt alle vorhandenen Einträge aus der Liste, sodass sie leer ist.
initialize()-
Entfernt alle vorhandenen Einträge aus der Liste und initialisiert sie mit dem einzelnen Eintrag neu, der als Parameter angegeben wurde.
getItem()-
Gibt den angegebenen Eintrag aus der Liste zurück.
insertItemBefore()-
Fügt an der angegebenen Position einen neuen Eintrag in die Liste ein.
removeItem()-
Entfernt einen vorhandenen Eintrag aus der Liste.
replaceItem()-
Ersetzt einen vorhandenen Eintrag in der Liste durch einen neuen Eintrag.
Beispiele
SVGLengthList verwenden
Ein SVGLengthList-Objekt kann aus einem SVGAnimatedLengthList-Objekt abgerufen werden. Dieses wiederum ist über viele animierbare Längenattribute zugänglich, beispielsweise über SVGTextPositioningElement.x.
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 |