SVGTransformList.removeItem() — Methode · JavaScript-Referenz

Signatur

SVGTransformList.prototype.removeItem(index)

Beschreibung

Die Methode removeItem() der Schnittstelle SVGTransformList entfernt die Transformation an Position index aus der Liste. Die folgenden Einträge rutschen um eine Stelle nach vorn, und numberOfItems bzw. length wird um eins kleiner.

Eine SVGTransformList bekommt man meist über element.transform.baseVal. Das ist die animierbare Basisliste, die zum Attribut transform eines SVG-Elements gehört. Jede Änderung an der Liste wird sofort in das Attribut zurückgeschrieben. Nach removeItem() verschwindet also der passende Teil aus dem transform-Attribut, zum Beispiel rotate(45).

Die Methode ist praktisch, wenn man einzelne Transformationen gezielt entfernen will, ohne den Attribut-String selbst zu zerlegen. Ein Beispiel ist eine Drehung, die nur beim Ziehen gilt und danach wieder entfernt wird. Das entfernte SVGTransform-Objekt wird zurückgegeben. Man kann es mit appendItem() oder insertItemBefore() an anderer Stelle oder in einem anderen Element wieder einfügen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Position des Eintrags, der entfernt werden soll (ab 0). Muss kleiner als `numberOfItems` sein.

Rückgabewert

Typ

SVGTransform

Beschreibung

Das entfernte SVGTransform-Objekt. Es gehört danach zu keiner Liste mehr und kann an anderer Stelle wieder eingefügt werden.

Beispiele

Erste Transformation eines Rechtecks entfernen

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

const list = rect.transform.baseVal;
const removed = list.removeItem(0);

console.log(removed.type === SVGTransform.SVG_TRANSFORM_TRANSLATE);
console.log(list.numberOfItems);
console.log(rect.getAttribute('transform'));

true 2 rotate(45) scale(2)

Alle Drehungen gezielt entfernen

const removeRotations = (element) => {
  const list = element.transform.baseVal;
  // Rückwärts laufen, damit sich die Indizes beim Entfernen nicht verschieben
  for (let i = list.numberOfItems - 1; i >= 0; i--) {
    if (list.getItem(i).type === SVGTransform.SVG_TRANSFORM_ROTATE) {
      list.removeItem(i);
    }
  }
};

const g = document.querySelector('svg g');
g.setAttribute('transform', 'rotate(10) translate(5 5) rotate(-30)');
removeRotations(g);
console.log(g.getAttribute('transform'));

translate(5 5)

Transformation zwischen Elementen verschieben

const [a, b] = document.querySelectorAll('svg circle');
a.setAttribute('transform', 'scale(1.5)');

const moved = a.transform.baseVal.removeItem(0);
b.transform.baseVal.appendItem(moved);

console.log(a.transform.baseVal.numberOfItems, b.getAttribute('transform'));

0 scale(1.5)

Ungültigen Index abfangen

const rect = document.querySelector('rect');
const list = rect.transform.baseVal;

try {
  list.removeItem(list.numberOfItems); // einen Eintrag zu weit
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

Index außerhalb des Bereichs: Ist index größer oder gleich numberOfItems, wirft die Methode eine DOMException vom Typ IndexSizeError.
Schreibgeschützte Listen: transform.animVal kann man nicht verändern. Ein Aufruf dort wirft NoModificationAllowedError. Ändern Sie immer baseVal.
Schleifen: Beim Entfernen verschieben sich die Indizes der folgenden Einträge. Wer mehrere Einträge in einer Schleife entfernt, sollte deshalb rückwärts laufen.
CSS-Transformationen: Die Liste bildet nur das SVG-Attribut transform ab. Eine Transformation, die per CSS (style.transform oder Stylesheet) gesetzt ist, bleibt davon unberührt und hat Vorrang.
Kompatibilität: Wird in allen modernen Browsern unterstützt. Die Eigenschaft length und der Zugriff per Index (list[i]) sind neuer als numberOfItems und getItem(). Für ältere Umgebungen sollten Sie diese beiden bevorzugen.

Siehe auch

SVGTransformList SVGTransformList.appendItem() SVGTransformList.insertItemBefore() SVGTransformList.getItem() SVGTransformList.clear() SVGTransformList.consolidate() SVGTransform