SVGLengthList.removeItem() — Methode · JavaScript-Referenz

Signatur

SVGLengthList.prototype.removeItem(index)

Beschreibung

Die Methode removeItem() des Interfaces SVGLengthList entfernt einen vorhandenen Eintrag an der Position index aus der Liste. Alle nachfolgenden Einträge rücken um eine Position nach vorn, length bzw. numberOfItems verringert sich um eins.

SVGLengthList-Objekte begegnen einem vor allem bei Text-Elementen: Die Attribute x, y, dx und dy von <text> und <tspan> können mehrere Längenwerte enthalten, mit denen sich einzelne Zeichen positionieren lassen. Über element.x.baseVal erhält man die veränderbare Liste. Änderungen daran werden sofort in das zugehörige Attribut zurückgeschrieben und damit auch gerendert.

Zurückgegeben wird das entfernte SVGLength-Objekt. Da es nicht mehr zur Liste gehört, kann man es weiterverwenden, etwa um es mit insertItemBefore() oder appendItem() an einer anderen Stelle oder in einer anderen Liste wieder einzufügen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des zu entfernenden Eintrags. Muss im Bereich `0` bis `numberOfItems - 1` liegen.

Rückgabewert

Typ

SVGLength

Beschreibung

Das aus der Liste entfernte SVGLength-Objekt.

Beispiele

Einzelnen x-Wert eines Text-Elements entfernen

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

const list = text.x.baseVal;
const removed = list.removeItem(1); // entfernt „20“

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

20 3 10 30 40

Eintrag verschieben: entfernen und an anderer Stelle einfügen

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('dx', '0 5 10 15');

const list = text.dx.baseVal;
// Letzten Eintrag an den Anfang verschieben
const last = list.removeItem(list.numberOfItems - 1);
list.insertItemBefore(last, 0);

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

15 0 5 10

Sicher entfernen mit Bereichsprüfung

const removeLengthSafe = (list, index) => {
  if (index < 0 || index >= list.numberOfItems) {
    console.warn(`Index ${index} liegt außerhalb der Liste`);
    return null;
  }
  return list.removeItem(index);
};

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('y', '50 60');

removeLengthSafe(text.y.baseVal, 5);
const r = removeLengthSafe(text.y.baseVal, 0);
console.log(r.value, text.getAttribute('y'));

Index 5 liegt außerhalb der Liste 50 60

// Wichtig · Fallstricke

Liegt index außerhalb des gültigen Bereichs, wird eine DOMException vom Typ IndexSizeError geworfen.
Ist die Liste schreibgeschützt (z. B. animVal statt baseVal), wird eine DOMException vom Typ NoModificationAllowedError geworfen. Ändern lässt sich immer nur baseVal.
Die Änderung wird sofort in das SVG-Attribut zurückgeschrieben. Wenn man in einer Schleife mehrere Einträge entfernt, sollte man rückwärts iterieren, weil sich die Indizes nach jedem Entfernen verschieben.
Die Methode wird in allen modernen Browsern unterstützt. Um alle Einträge auf einmal zu entfernen, ist clear() einfacher.

Siehe auch

SVGLengthList SVGLengthList.insertItemBefore() SVGLengthList.appendItem() SVGLengthList.clear() SVGLengthList.getItem() SVGLength Sanitizer.removeElement()