SVGTransformList.clear() — Methode · JavaScript-Referenz

Signatur

SVGTransformList.prototype.clear()

Beschreibung

Die Methode clear() der Schnittstelle SVGTransformList löscht alle SVGTransform-Objekte aus der Liste. Danach ist numberOfItems (bzw. length) gleich 0. Die Liste bleibt als Objekt bestehen und lässt sich weiter mit appendItem() oder initialize() befüllen.

Normalerweise erreicht man die Liste über element.transform.baseVal. Diese Liste ist direkt an das Attribut transform gekoppelt: Ein Aufruf von clear() ändert das Attribut sofort, und das Element wird ohne Transformation dargestellt, also im ursprünglichen Koordinatensystem.

Einsatzfälle:

Transformationen zurücksetzen, etwa bei einem „Reset“-Knopf in einem SVG-Editor.
Die Liste leeren und danach eine neue Folge von Transformationen aufbauen, ohne Zeichenketten zu parsen.
Transformationen einer Animation aufräumen, bevor ein neuer Zustand gesetzt wird.

Beispiele

Alle Transformationen eines Rechtecks zurücksetzen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '50');
rect.setAttribute('height', '50');
rect.setAttribute('transform', 'translate(20, 10) rotate(45) scale(2)');
svg.append(rect);
document.body.append(svg);

const list = rect.transform.baseVal;
console.log(list.numberOfItems);

list.clear();
console.log(list.numberOfItems);
console.log(rect.getAttribute('transform'));

3 0 "" (je nach Browser auch null)

Liste leeren und neu aufbauen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('r', '10');
circle.setAttribute('transform', 'skewX(30) scale(3)');
svg.append(circle);
document.body.append(svg);

const list = circle.transform.baseVal;
list.clear();

// Neue Transformationen über SVGTransform-Objekte anlegen
const move = svg.createSVGTransform();
move.setTranslate(100, 50);
const turn = svg.createSVGTransform();
turn.setRotate(90, 0, 0);

list.appendItem(move);
list.appendItem(turn);

console.log(list.numberOfItems);
console.log(circle.getAttribute('transform'));

2 translate(100 50) rotate(90) (Formatierung je nach Browser verschieden)

Reset-Knopf in einem einfachen SVG-Editor

const shape = document.querySelector('#shape');
const resetButton = document.querySelector('#reset');

resetButton.addEventListener('click', () => {
  const list = shape.transform.baseVal;
  if (list.numberOfItems > 0) {
    list.clear();
    console.log('Transformationen entfernt');
  }
});

Transformationen entfernt

// Wichtig · Fallstricke

Nur baseVal ist veränderbar: Wird clear() auf element.transform.animVal aufgerufen, wirft der Browser eine DOMException mit dem Namen NoModificationAllowedError, weil diese Liste schreibgeschützt ist.
CSS-Transformationen bleiben: clear() betrifft nur das SVG-Attribut transform. Eine per CSS gesetzte Eigenschaft transform (z. B. style.transform) hat Vorrang und wird nicht entfernt.
Verweise werden gelöst: Vorher geholte SVGTransform-Objekte gehören danach nicht mehr zur Liste. Wenn man sie später ändert, wirkt sich das nicht mehr auf das Element aus.
Wert des Attributs: Ob das Attribut danach leer ist oder ganz fehlt, unterscheidet sich zwischen den Browsern. Man sollte sich nicht auf eine bestimmte Form verlassen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. length als Alias für numberOfItems gibt es erst in neueren Versionen.

Siehe auch

SVGTransformList SVGTransformList.initialize() SVGTransformList.appendItem() SVGTransformList.removeItem() SVGTransformList.consolidate() SVGTransform SVGSVGElement.createSVGTransform()