SVGPointList.clear() — Methode · JavaScript-Referenz

Signatur

SVGPointList.prototype.clear()

Beschreibung

Die Methode clear() der Schnittstelle SVGPointList entfernt alle Einträge aus der Liste. Die Liste bekommt man meist über die Eigenschaft points eines <polyline>- oder <polygon>-Elements (SVGPolylineElement.points bzw. SVGPolygonElement.points).

Die Liste ist live, also direkt mit dem Attribut points des Elements verbunden. Nach clear() ist numberOfItems gleich 0, das Attribut points ist leer und die Form wird nicht mehr gezeichnet. Das ist praktisch, wenn man eine Form komplett neu aufbauen will, z. B. bei Live-Diagrammen, Zeichenwerkzeugen oder Animationen, die jedes Mal einen neuen Pfad berechnen.

Übliches Vorgehen: erst clear() aufrufen und die Liste danach mit appendItem() wieder füllen. Alternativ setzt man initialize(newItem) ein, das die Liste leert und gleich den ersten Punkt einfügt.

Beispiele

Alle Punkte einer Polylinie entfernen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const line = document.createElementNS(svgNS, 'polyline');
line.setAttribute('points', '0,0 10,20 30,5');
svg.append(line);
document.body.append(svg);

console.log(line.points.numberOfItems);
line.points.clear();
console.log(line.points.numberOfItems);
console.log(JSON.stringify(line.getAttribute('points')));

3 0 ""

Live-Diagramm: Liste leeren und neu füllen

const svg = document.querySelector('svg');
const chart = svg.querySelector('polyline');

const render = (values) => {
  chart.points.clear(); // alte Punkte verwerfen
  values.forEach((y, i) => {
    const p = svg.createSVGPoint();
    p.x = i * 20;
    p.y = 100 - y;
    chart.points.appendItem(p);
  });
};

render([10, 40, 25, 70]);
console.log(chart.getAttribute('points'));

0,90 20,60 40,75 60,30

Schreibgeschützte Liste abfangen

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

try {
  // animatedPoints ist schreibgeschützt
  poly.animatedPoints.clear();
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Schreibgeschützte Listen: Bei einer schreibgeschützten Liste wie animatedPoints wirft clear() einen DOMException vom Typ NoModificationAllowedError. Ändern darf man nur points.
Leere Form: Eine <polyline> oder ein <polygon> ohne Punkte wird nicht gezeichnet. getBBox() liefert dann eine Box mit der Größe 0.
Punkt-Objekte, die man vorher mit getItem() geholt hat, gehören nach clear() nicht mehr zur Liste. Wenn man sie danach ändert, ändert sich die Form nicht mehr.
Für viele Punkte ist oft setAttribute('points', …) mit einem fertigen String schneller als viele einzelne appendItem()-Aufrufe.
createSVGPoint() gilt als veraltet, funktioniert aber in allen Browsern. Neuere Browser nehmen bei appendItem() auch ein DOMPoint an.
Kompatibilität: SVGPointList gibt es in Chrome, Edge und Safari schon lange. Firefox unterstützt die Schnittstelle erst seit Version 111 wieder vollständig.

Siehe auch

SVGPointList SVGPointList.appendItem() SVGPointList.initialize() SVGPointList.removeItem() SVGPointList.numberOfItems SVGPolylineElement.points HighlightRegistry.clear()