SVGPointList.removeItem() — Methode · JavaScript-Referenz

Signatur

SVGPointList.prototype.removeItem(index)

Beschreibung

Die Methode removeItem() der Schnittstelle SVGPointList entfernt den Punkt am übergebenen Index aus der Liste. Eine solche Liste bekommt man in der Regel über die Eigenschaft points bzw. animatedPoints eines <polyline>- oder <polygon>-Elements.

Die Liste ist live an das Element gebunden: Nach dem Entfernen verschieben sich alle folgenden Einträge um eine Position nach vorn, length bzw. numberOfItems sinkt um eins, und das Attribut points im DOM wird sofort neu geschrieben. Die Form wird also direkt neu gezeichnet.

Die Methode gibt den entfernten Punkt zurück (in aktuellen Browsern ein DOMPoint, in älteren ein SVGPoint). So kannst du ihn zwischenspeichern und später zum Beispiel mit insertItemBefore() oder appendItem() wieder einfügen, etwa für eine Rückgängig-Funktion in einem Editor.

Parameter

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

Rückgabewert

Typ

DOMPoint

Beschreibung

Der entfernte Punkt (in älteren Implementierungen ein SVGPoint). Er gehört danach nicht mehr zur Liste.

Beispiele

Letzten Punkt eines Polygons entfernen

const ns = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(ns, 'svg');
const polygon = document.createElementNS(ns, 'polygon');
polygon.setAttribute('points', '0,0 100,0 100,100 0,100');
svg.append(polygon);
document.body.append(svg);

const list = polygon.points;
const removed = list.removeItem(list.numberOfItems - 1);

console.log(removed.x, removed.y);
console.log(list.numberOfItems);
console.log(polygon.getAttribute('points'));

0 100 3 0,0 100,0 100,100

Rückgängig-Funktion: Punkt entfernen und wieder einfügen

const polyline = document.querySelector('polyline');
const list = polyline.points;
const history = [];

const removePoint = (index) => {
  const point = list.removeItem(index);
  history.push({ index, point });
};

const undo = () => {
  const last = history.pop();
  if (last) list.insertItemBefore(last.point, last.index);
};

removePoint(1);
console.log(list.numberOfItems); // einer weniger
undo();
console.log(list.numberOfItems); // wieder wie vorher

Sicheres Entfernen mit Indexprüfung

const safeRemove = (list, index) => {
  if (index < 0 || index >= list.numberOfItems) {
    console.warn(`Index ${index} außerhalb des gültigen Bereichs`);
    return null;
  }
  return list.removeItem(index);
};

const poly = document.querySelector('polygon');
safeRemove(poly.points, 99);

Index 99 außerhalb des gültigen Bereichs

// Wichtig · Fallstricke

Ungültiger Index: Liegt index außerhalb des gültigen Bereichs, wird eine DOMException mit dem Namen IndexSizeError geworfen.
Nur lesbare Listen: animatedPoints ist schreibgeschützt. Ein Aufruf darauf wirft einen NoModificationAllowedError. Ändere deshalb immer points.
Beim Iterieren entfernen: Die Liste ist live, und die Indizes verschieben sich nach jedem Entfernen. Wenn du in einer Schleife mehrere Punkte entfernst, laufe rückwärts (von numberOfItems - 1 bis 0).
Rückgabetyp: Neuere Browser geben DOMPoint zurück, ältere SVGPoint. Beide haben x und y.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Für viele Punkte auf einmal kann es schneller sein, das Attribut points direkt neu zu setzen.

Siehe auch

SVGPointList SVGPointList.insertItemBefore() SVGPointList.appendItem() SVGPointList.replaceItem() SVGPointList.clear() SVGPointList.getItem() SVGPointList.numberOfItems