SVGPointList.insertItemBefore() — Methode · JavaScript-Referenz

Signatur

SVGPointList.prototype.insertItemBefore(newItem, index)

Beschreibung

Mit insertItemBefore() fügst du einen Punkt vor dem Element an Position index in eine SVGPointList ein. Alle folgenden Punkte rücken um eine Position nach hinten. Solche Listen bekommst du über die Eigenschaft points von <polygon>- und <polyline>-Elementen.

Nützlich ist das vor allem in interaktiven Editoren, z. B. wenn der Nutzer einen neuen Stützpunkt zwischen zwei vorhandenen Eckpunkten einfügt, oder wenn du Formen per Skript Schritt für Schritt aufbaust, ohne das points-Attribut jedes Mal als String neu zu setzen. Die Änderung landet sofort im Attribut points und wird direkt gerendert.

Ist index gleich oder größer als numberOfItems, wird der Punkt ans Ende der Liste angehängt. Das Verhalten entspricht dann appendItem(). Mit index 0 fügst du den Punkt am Anfang ein.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	DOMPoint \| SVGPoint		Der einzufügende Punkt. Am zuverlässigsten erzeugst du ihn mit `svgElement.createSVGPoint()`.
$index Pflicht	number		Position, vor der eingefügt wird (vorzeichenlose Ganzzahl, beginnt bei 0). Ist der Wert `>= numberOfItems`, wird der Punkt am Ende angehängt.

Rückgabewert

Typ

DOMPoint | SVGPoint

Beschreibung

Der tatsächlich eingefügte Punkt. Je nach Implementierung kann das eine Kopie von newItem sein. Arbeite deshalb für spätere Änderungen mit dem Rückgabewert weiter.

Beispiele

Punkt am Anfang eines Polygons einfügen

const svg = document.querySelector('svg');
const polygon = document.querySelector('polygon'); // points="50,10 90,90 10,90"

const p = svg.createSVGPoint();
p.x = 50;
p.y = 50;

polygon.points.insertItemBefore(p, 0);
console.log(polygon.getAttribute('points'));

50,50 50,10 90,90 10,90

Stützpunkt zwischen zwei Eckpunkten einer Polylinie einfügen

const svg = document.querySelector('svg');
const line = document.querySelector('polyline'); // points="0,0 100,0 100,100"

// Mittelpunkt zwischen Punkt i und i+1 einfügen
const insertMidpoint = (el, i) => {
  const list = el.points;
  const a = list.getItem(i);
  const b = list.getItem(i + 1);
  const mid = svg.createSVGPoint();
  mid.x = (a.x + b.x) / 2;
  mid.y = (a.y + b.y) / 2;
  return list.insertItemBefore(mid, i + 1);
};

const inserted = insertMidpoint(line, 0);
inserted.y = -20; // mit dem Rückgabewert weiterarbeiten
console.log(line.points.numberOfItems, line.getAttribute('points'));

4 0,0 50,-20 100,0 100,100

Zu großer Index hängt den Punkt am Ende an

const svg = document.querySelector('svg');
const polygon = document.querySelector('polygon'); // points="0,0 10,0 10,10"

const p = svg.createSVGPoint();
p.x = 0;
p.y = 10;

polygon.points.insertItemBefore(p, 999);
console.log(polygon.getAttribute('points'));

0,0 10,0 10,10 0,10

Fehler bei schreibgeschützter Liste abfangen

const svg = document.querySelector('svg');
const polygon = document.querySelector('polygon');

try {
  polygon.animatedPoints.insertItemBefore(svg.createSVGPoint(), 0);
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Schreibgeschützte Listen: animatedPoints kann nicht verändert werden. Ein Aufruf wirft eine DOMException vom Typ NoModificationAllowedError. Ändere stattdessen immer points.
Punkt steckt schon in einer Liste: Nach SVG 1.1 wird newItem aus seiner bisherigen Liste entfernt. Nach SVG 2 wird eine Kopie eingefügt. Browser verhalten sich hier nicht immer gleich. Arbeite daher mit dem Rückgabewert, statt dich auf das Originalobjekt zu verlassen.
Punkt-Typ: Einige Browser (vor allem ältere Chromium-Versionen) erwarten ein SVGPoint und werfen bei new DOMPoint() einen TypeError. svgElement.createSVGPoint() funktioniert überall, ist aber als veraltet markiert.
Leistung: Bei sehr vielen Änderungen kann es schneller sein, das points-Attribut einmal als String zu setzen, als viele Einzelaufrufe zu machen.
Die Liste ist live. Indizes, die du vorher gespeichert hast, verschieben sich nach dem Einfügen.

Siehe auch

SVGPointList SVGPointList.appendItem() SVGPointList.replaceItem() SVGPointList.removeItem() SVGPointList.getItem() SVGSVGElement.createSVGPoint()