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.

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

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