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 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 festgelegt 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.
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()
-
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 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, welches selbst aus vielen animierbaren Längenattributen abrufbar ist, wie z.B. 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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGLengthList | ||||||||||||
appendItem | ||||||||||||
clear | ||||||||||||
getItem | ||||||||||||
initialize | ||||||||||||
insertItemBefore | ||||||||||||
length | ||||||||||||
numberOfItems | ||||||||||||
removeItem | ||||||||||||
replaceItem |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support