SVGPointList.appendItem() — Methode · JavaScript-Referenz

Signatur

SVGPointList.prototype.appendItem(newItem)

Beschreibung

Mit appendItem() hängst du einen neuen Punkt an das Ende einer SVGPointList an. Solche Listen erhältst du über die Eigenschaft points von <polygon>- und <polyline>-Elementen. Die Änderung wird sofort in das points-Attribut übernommen, und die Grafik wird neu gezeichnet.

Die Methode eignet sich, wenn du Formen schrittweise und ohne String-Verarbeitung aufbauen willst, etwa beim Zeichnen mit der Maus, bei Live-Diagrammen oder bei der Visualisierung von Messwerten. Im Vergleich zum ständigen Neuschreiben des Attributs mit setAttribute('points', …) ist das übersichtlicher und vermeidet Fehler beim Zusammensetzen der Zeichenkette.

Einen passenden Punkt erzeugst du am einfachsten mit svgElement.createSVGPoint(). In modernen Browsern kannst du auch direkt ein new DOMPoint(x, y) übergeben. Beachte: Änderbar ist nur die Basisliste points. Die Liste animatedPoints ist schreibgeschützt.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	DOMPoint \| SVGPoint		Der Punkt, der angehängt werden soll. Relevant sind nur die Koordinaten `x` und `y`.

Rückgabewert

Typ

DOMPoint | SVGPoint

Beschreibung

Der Punkt, der in die Liste eingefügt wurde. Je nach Browser ist das dasselbe Objekt oder eine an die Liste gebundene Kopie.

Beispiele

Einem Polygon einen Punkt hinzufügen

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

const pt = svg.createSVGPoint();
pt.x = 10;
pt.y = 100;

polygon.points.appendItem(pt);

console.log(polygon.points.numberOfItems);
console.log(polygon.getAttribute('points'));

4 10,10 100,10 100,100 10,100

Polyline per Mausklick erweitern

const svg = document.querySelector('#canvas');
const line = svg.querySelector('polyline');

svg.addEventListener('click', (event) => {
  // Bildschirmkoordinaten in SVG-Koordinaten umrechnen
  const pt = svg.createSVGPoint();
  pt.x = event.clientX;
  pt.y = event.clientY;
  const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());

  line.points.appendItem(svgPt);
});

Messwerte als Liniendiagramm darstellen

const svg = document.querySelector('svg');
const chart = svg.querySelector('polyline');
const werte = [12, 40, 25, 60, 35];

chart.points.clear();
werte.forEach((wert, i) => {
  // new DOMPoint funktioniert in modernen Browsern direkt
  chart.points.appendItem(new DOMPoint(i * 50, 100 - wert));
});

console.log(chart.getAttribute('points'));

0,88 50,60 100,75 150,40 200,65

// Wichtig · Fallstricke

Schreibschutz: Wenn du appendItem() auf animatedPoints oder einer anderen schreibgeschützten Liste aufrufst, wird eine DOMException vom Typ NoModificationAllowedError ausgelöst.
Kopie oder Referenz: Nach SVG 1.1 wird ein Punkt, der schon in einer anderen Liste steht, zuerst dort entfernt. Manche Browser fügen dagegen eine Kopie ein. Nutze deshalb für spätere Änderungen immer den Rückgabewert und nicht das Objekt, das du übergeben hast.
Typ des Punkts: Ältere Browser erwarten ein SVGPoint und lehnen ein reines DOMPoint mit TypeError ab. svg.createSVGPoint() funktioniert überall.
Leistung: Jeder Aufruf aktualisiert das Attribut und löst ein Neuzeichnen aus. Bei sehr vielen Punkten ist es oft schneller, die Zeichenkette einmal zu bauen und mit setAttribute('points', …) zu setzen.
Die Methode wird in allen aktuellen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.

Siehe auch

SVGPointList SVGPointList.insertItemBefore() SVGPointList.replaceItem() SVGPointList.removeItem() SVGPointList.clear() SVGSVGElement.createSVGPoint() SVGPolygonElement