SVGLengthList.clear() — Methode · JavaScript-Referenz

Signatur

SVGLengthList.prototype.clear()

Beschreibung

Die Methode clear() der Schnittstelle SVGLengthList entfernt alle SVGLength-Objekte aus der Liste. Danach hat die Liste die Länge 0. Solche Listen bekommt man vor allem über die Attribute x, y, dx und dy von Textelementen wie <text> und <tspan>, und zwar über element.x.baseVal usw.

Sinnvoll ist clear(), wenn du die Positionen eines Textelements komplett neu aufbauen willst, etwa um Zeichen einzeln per appendItem() zu setzen. Die Liste ist „live“ mit dem zugehörigen Attribut verbunden: Nach clear() ist auch der Attributwert im DOM leer (zum Beispiel x="").

Ändern kannst du nur die Basisliste (baseVal). Die animierte Liste (animVal) ist schreibgeschützt. Ein Aufruf von clear() darauf löst einen NoModificationAllowedError aus.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

x-Positionen eines Textelements leeren

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10 20 30');
text.textContent = 'ABC';
svg.append(text);
document.body.append(svg);

const xList = text.x.baseVal;
console.log(xList.numberOfItems); // 3

xList.clear();
console.log(xList.numberOfItems); // 0
console.log(JSON.stringify(text.getAttribute('x')));

3 0 ""

Positionen komplett neu aufbauen

const text = document.querySelector('svg text');
const svg = text.ownerSVGElement;
const list = text.x.baseVal;

// Alte Werte entfernen und neue Positionen setzen (Abstand 15px)
list.clear();
[...text.textContent].forEach((_, i) => {
  const len = svg.createSVGLength();
  len.value = 10 + i * 15;
  list.appendItem(len);
});

console.log(text.getAttribute('x'));

10 25 40 (bei drei Zeichen)

Fehler bei animVal abfangen

const text = document.querySelector('svg text');

try {
  text.x.animVal.clear();
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Nur baseVal ist veränderbar: Auf animVal und anderen schreibgeschützten Listen wirft clear() einen DOMException vom Typ NoModificationAllowedError.
Nach clear() verwenden Textelemente ihre Standardposition (x = 0). Der Text kann dadurch sichtbar an eine andere Stelle springen.
Wenn du viele Werte neu setzen willst, ist initialize(newItem) gefolgt von appendItem() eine Alternative. initialize() leert die Liste ebenfalls und fügt direkt den ersten Eintrag ein.
Einfacher und oft besser lesbar ist es, das Attribut direkt zu setzen, z. B. mit text.setAttribute('x', '') oder removeAttribute('x').
Browser-Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGLengthList SVGLengthList.appendItem() SVGLengthList.initialize() SVGLengthList.removeItem() SVGLengthList.numberOfItems SVGLength SVGSVGElement.createSVGLength()