SVGLengthList

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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.

In diesem Artikel

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

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

Spezifikation

Scalable Vector Graphics (SVG) 2
# InterfaceSVGLengthList

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden