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

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

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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

Siehe auch