SVGNumberList.clear() — Methode · JavaScript-Referenz

Signatur

SVGNumberList.prototype.clear()

Beschreibung

Die Methode clear() der Schnittstelle SVGNumberList löscht alle SVGNumber-Objekte aus der Liste. Danach ist die Liste leer, und numberOfItems bzw. length liefern 0.

Eine SVGNumberList begegnet dir vor allem über baseVal einer SVGAnimatedNumberList. Beispiele sind das Attribut rotate von <text>/<tspan> (text.rotate.baseVal), values von <feColorMatrix>, kernelMatrix von <feConvolveMatrix> und tableValues der Übertragungsfunktionen (Transferfunktionen) in <feComponentTransfer>.

Die Liste ist „live“ mit dem Attribut verbunden. Änderungen über clear() wirken sich also sofort auf das zugehörige Attribut und die Darstellung aus. Meist nutzt man clear(), um eine Liste komplett neu aufzubauen: erst leeren, dann mit appendItem() neue Werte anhängen. Wenn du die Liste nur durch einen einzigen Wert ersetzen willst, geht das direkter mit initialize().

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Liste wird direkt verändert.

Beispiele

Rotation einzelner Zeichen zurücksetzen

// <svg><text id="label" x="10" y="40" rotate="10 20 30">SVG</text></svg>
const text = document.getElementById('label');
const rotations = text.rotate.baseVal;

console.log(rotations.numberOfItems); // 3
rotations.clear();
console.log(rotations.numberOfItems); // 0
console.log(text.getAttribute('rotate'));

3 0 "" (je nach Browser ein leerer String; das Attribut kann auch ganz entfernt werden)

Liste leeren und mit neuen Werten neu aufbauen

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

const setRotations = (angles) => {
  list.clear();
  for (const angle of angles) {
    const num = svg.createSVGNumber();
    num.value = angle;
    list.appendItem(num);
  }
};

setRotations([0, 15, 30, 45]);
console.log(text.getAttribute('rotate'));

0 15 30 45

Farbmatrix eines Filters zurücksetzen

// <filter id="f"><feColorMatrix id="cm" type="matrix" values="..."/></filter>
const matrix = document.getElementById('cm');
const values = matrix.values.baseVal;

values.clear();
console.log(values.length); // 0 – der Filter nutzt jetzt den Standardwert (Einheitsmatrix)

Fehler bei schreibgeschützter animVal-Liste

const text = document.querySelector('text');
try {
  text.rotate.animVal.clear();
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Schreibschutz: Ist die Liste schreibgeschützt, wirft clear() eine DOMException vom Typ NoModificationAllowedError. Das betrifft insbesondere animVal. Ändere deshalb immer baseVal.
Referenzen: SVGNumber-Objekte, die du vorher aus der Liste gelesen hast, gehören nach clear() nicht mehr zur Liste. Wenn du sie änderst, hat das keine Wirkung mehr auf das Attribut.
Leere Liste mit Folgen: Bei manchen Attributen hat eine leere Liste eine eigene Bedeutung. Bei feColorMatrix greift zum Beispiel wieder der Standardwert, und feConvolveMatrix mit leerer kernelMatrix ist ungültig und kann den Filter deaktivieren.
Kompatibilität: Wird von allen modernen Browsern unterstützt. length als Alias für numberOfItems fehlt in sehr alten Browsern.

Siehe auch

SVGNumberList SVGNumberList.initialize() SVGNumberList.appendItem() SVGNumberList.removeItem() SVGNumberList.numberOfItems SVGSVGElement.createSVGNumber() SVGNumber