Signatur
Beschreibung
Die Methode initialize() der Schnittstelle SVGPointList setzt eine Punktliste in einem Schritt zurück: Zuerst werden alle vorhandenen Einträge entfernt, danach wird der übergebene Punkt als einziges Element eingefügt. Danach gilt list.numberOfItems === 1.
Punktlisten gibt es vor allem bei <polyline> und <polygon> über die Eigenschaft points. Die Liste ist live: Jede Änderung wird sofort in das Attribut points übernommen und neu gerendert. Mit initialize() beginnt man also eine Form neu, etwa bevor man eine Linie Punkt für Punkt mit appendItem() neu zeichnet, wie bei einer Freihandzeichnung oder einem Live-Diagramm.
Einen Punkt bekommt man am zuverlässigsten mit svgElement.createSVGPoint() (Browser-übergreifend) oder in neueren Browsern mit new DOMPoint(x, y). Liegt der übergebene Punkt schon in einer anderen Liste oder ist er schreibgeschützt, fügt der Browser laut SVG 2 eine Kopie ein. Deshalb sollte man immer mit dem Rückgabewert weiterarbeiten.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $newItem Pflicht | DOMPoint | SVGPoint | Der Punkt, der nach dem Leeren als einziger Eintrag in die Liste kommt. Relevant sind nur x und y. |
Rückgabewert
newItem selbst oder eine Kopie davon, falls der Punkt schon in einer anderen Liste lag.Beispiele
Polyline auf einen einzigen Startpunkt zurücksetzen
const svg = document.querySelector('svg');
const line = document.querySelector('polyline'); // points="10,10 50,50 90,10"
console.log(line.points.numberOfItems); // 3
const start = svg.createSVGPoint();
start.x = 20;
start.y = 30;
line.points.initialize(start);
console.log(line.points.numberOfItems); // 1
console.log(line.getAttribute('points')); // Attribut wird live aktualisiertFreihandzeichnung: bei jedem Mausklick neue Linie beginnen
const svg = document.querySelector('svg');
const path = document.querySelector('#stroke'); // <polyline id="stroke" fill="none" stroke="black"/>
let drawing = false;
// Mauskoordinaten in SVG-Koordinaten umrechnen
const toSvgPoint = (evt) => {
const p = svg.createSVGPoint();
p.x = evt.clientX;
p.y = evt.clientY;
return p.matrixTransform(svg.getScreenCTM().inverse());
};
svg.addEventListener('pointerdown', (evt) => {
drawing = true;
// Alte Linie verwerfen, neue beginnt am Klickpunkt
path.points.initialize(toSvgPoint(evt));
});
svg.addEventListener('pointermove', (evt) => {
if (drawing) path.points.appendItem(toSvgPoint(evt));
});
svg.addEventListener('pointerup', () => { drawing = false; });Rückgabewert nutzen, da eventuell eine Kopie eingefügt wird
const a = document.querySelector('#polyA');
const b = document.querySelector('#polyB');
const shared = a.points.getItem(0); // Punkt steckt bereits in Liste A
const inserted = b.points.initialize(shared);
console.log(inserted === shared); // false: eine Kopie wurde eingefügt
inserted.x += 10; // verändert nur polyB
console.log(a.points.getItem(0).x === shared.x);// Wichtig · Fallstricke
- Schreibgeschützte Listen: Bei
animatedPointswirft der Aufruf einenNoModificationAllowedError(DOMException). Ändern sollte man immer nurpoints. - Falscher Typ: Ein Objekt, das kein Punkt ist (zum Beispiel
{x: 1, y: 2}), führt zu einemTypeError. DeshalbcreateSVGPoint()odernew DOMPoint()verwenden. - Browser-Unterschiede: Firefox arbeitet mit
DOMPoint. Chromium und Safari liefern teilweise nochSVGPoint.svg.createSVGPoint()funktioniert überall, ist in SVG 2 aber als veraltet gekennzeichnet. - Leere Liste: Es gibt keine eigene Methode, die nur leert, ohne einen Punkt einzufügen. Dafür gibt es
clear(). - Kopien: Liegt der Punkt schon in einer anderen Liste, wird eine Kopie eingefügt. Mit dem Rückgabewert statt mit dem Original weiterarbeiten.