SVGNumberList.removeItem() — Methode · JavaScript-Referenz

Signatur

SVGNumberList.prototype.removeItem(index)

Beschreibung

removeItem() entfernt das SVGNumber-Objekt an der Position index aus einer SVGNumberList. Alle nachfolgenden Elemente rücken um eine Position nach vorn, und numberOfItems bzw. length verringert sich um 1. Die Änderung wirkt sofort auf das zugehörige SVG-Attribut, der Browser schreibt es also neu und rendert die Grafik neu.

Zahlenlisten kommen in SVG z. B. bei diesen Attributen vor: rotate von <text> und <tspan>, values von <feColorMatrix>, kernelMatrix von <feConvolveMatrix> und tableValues der Transferfunktionen (<feFuncR> usw.). Zugriff bekommst du über die jeweilige SVGAnimatedNumberList, genauer über deren Eigenschaft baseVal.

Die Methode ist praktisch, wenn du einzelne Werte gezielt löschen willst, ohne das ganze Attribut als Zeichenkette zu zerlegen und neu zusammenzusetzen, etwa beim interaktiven Bearbeiten von Filtern oder Buchstabendrehungen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des Elements, das entfernt werden soll. Er muss kleiner als `numberOfItems` sein. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt.

Rückgabewert

Typ

SVGNumber

Beschreibung

Das entfernte SVGNumber-Objekt. Es gehört danach nicht mehr zur Liste, behält aber seinen value.

Beispiele

Einzelne Buchstabendrehung aus rotate entfernen

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

const list = text.rotate.baseVal;
const removed = list.removeItem(1);

console.log(removed.value);
console.log(list.numberOfItems);
console.log(text.getAttribute('rotate'));

20 2 10 30

Alle negativen Werte aus einer Farbmatrix-Liste löschen

const svgNS = 'http://www.w3.org/2000/svg';
const fe = document.createElementNS(svgNS, 'feColorMatrix');
fe.setAttribute('type', 'saturate');
fe.setAttribute('values', '-1 0.5 -2 3');

const list = fe.values.baseVal;
// Rückwärts laufen, damit das Nachrücken die Indizes nicht verschiebt
for (let i = list.numberOfItems - 1; i >= 0; i--) {
  if (list.getItem(i).value < 0) {
    list.removeItem(i);
  }
}

console.log(fe.getAttribute('values'));

0.5 3

Ungültigen Index abfangen

const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('rotate', '45');

try {
  text.rotate.baseVal.removeItem(5);
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

IndexSizeError: Ist index größer oder gleich numberOfItems, wirft die Methode eine DOMException. Prüfe den Index also vorher oder fang den Fehler ab.
NoModificationAllowedError: animVal ist schreibgeschützt. Änderungen immer über baseVal machen.
Wenn du in einer Schleife löschst, lauf rückwärts durch die Liste. Sonst überspringst du Elemente, weil die folgenden Werte nachrücken.
Die Methode gibt es in allen modernen Browsern. Manche Browser setzen length und die Index-Schreibweise (list[i]) aus SVG 2 nicht einheitlich um. Verlässlich funktionieren numberOfItems und getItem().

Siehe auch

SVGNumberList SVGNumberList.getItem() SVGNumberList.appendItem() SVGNumberList.insertItemBefore() SVGNumberList.clear() SVGNumber SVGAnimatedNumberList