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 |
Browser-Kompatibilität
Loading…