SVGLengthList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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 definiert werden, was bedeutet, dass Versuche, das Objekt zu ändern, zu einer Ausnahme führen.
Ein SVGLengthList
-Objekt ist indizierbar 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 ein.
clear()
-
Löscht alle vorhandenen Elemente aus der Liste, sodass eine leere Liste entsteht.
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 die angegebene Position in der 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, welches selbst von vielen animierbaren Längenattributen, wie z.B. 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
BCD tables only load in the browser