SVGPointList.getItem() — Methode · JavaScript-Referenz

Signatur

SVGPointList.prototype.getItem(index)

Beschreibung

Die Methode getItem() der Schnittstelle SVGPointList liefert den Punkt an einer bestimmten Stelle der Liste. Eine SVGPointList bekommt man meist über die Eigenschaft points von <polygon>- und <polyline>-Elementen. Sie steht für die Koordinaten aus dem Attribut points.

Der zurückgegebene Punkt ist live. Er ist also kein Duplikat, sondern ein Verweis auf den Eintrag in der Liste. Wenn du seine Eigenschaften x oder y änderst, aktualisiert der Browser sofort das Attribut points und damit die Darstellung. So lassen sich einzelne Eckpunkte gezielt verschieben, ohne den ganzen Attribut-String neu zu parsen.

Typische Anwendungen sind interaktive Editoren, bei denen man Eckpunkte mit der Maus zieht, Animationen einzelner Stützpunkte und das Auslesen von Geometrie, etwa für Berechnungen von Fläche, Umfang oder Begrenzungsrahmen. Die Anzahl der Einträge steht in numberOfItems (in neueren Browsern auch in length).

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des gewünschten Punkts. Muss kleiner als `numberOfItems` sein. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt.

Rückgabewert

Typ

DOMPoint

Beschreibung

Der Punkt an der Position index. In älteren Spezifikationen und Browsern ist das ein SVGPoint. Es ist ein live verbundenes Objekt: Wenn du x oder y änderst, ändert sich das Element mit.

Beispiele

Eckpunkte eines Polygons auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const polygon = document.createElementNS(svgNS, 'polygon');
polygon.setAttribute('points', '10,10 100,10 55,90');

const list = polygon.points;
for (let i = 0; i < list.numberOfItems; i++) {
  const p = list.getItem(i);
  console.log(`Punkt ${i}: (${p.x}, ${p.y})`);
}

Punkt 0: (10, 10) Punkt 1: (100, 10) Punkt 2: (55, 90)

Einzelnen Eckpunkt live verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const line = document.createElementNS(svgNS, 'polyline');
line.setAttribute('points', '0,0 50,50 100,0');

// Mittleren Punkt nach unten ziehen – das Attribut wird automatisch aktualisiert
const mid = line.points.getItem(1);
mid.y = 80;

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

0,0 50,80 100,0

Ungültigen Index abfangen

const svgNS = 'http://www.w3.org/2000/svg';
const polygon = document.createElementNS(svgNS, 'polygon');
polygon.setAttribute('points', '0,0 10,0 10,10');

const safeGetPoint = (list, index) => {
  try {
    return list.getItem(index);
  } catch (err) {
    console.warn(`${err.name}: Index ${index} existiert nicht`);
    return null;
  }
};

console.log(safeGetPoint(polygon.points, 5));

IndexSizeError: Index 5 existiert nicht null

// Wichtig · Fallstricke

Fehlerfall: Ist index größer oder gleich numberOfItems, wirft die Methode eine DOMException vom Typ IndexSizeError. Sie gibt dann nicht undefined zurück, anders als der Zugriff per Klammer list[i].
Negative Indizes: Ein Wert wie -1 wird in eine große vorzeichenlose Zahl umgewandelt und löst deshalb ebenfalls IndexSizeError aus. Es gibt keinen Zugriff „vom Ende her“ wie bei Array.prototype.at().
Live-Objekt: Änderungen an dem zurückgegebenen Punkt wirken direkt auf das Element. Brauchst du eine unabhängige Kopie, erzeuge sie z. B. mit DOMPoint.fromPoint(p) oder { x: p.x, y: p.y }.
Typ des Punkts: In aktuellen Browsern ist der Rückgabewert ein DOMPoint. Ältere Engines liefern ein SVGPoint mit denselben Eigenschaften x und y.
Kompatibilität: getItem() wird von allen modernen Browsern unterstützt. length und der Zugriff per Index (points[i]) sind neuer, deshalb ist getItem() in Legacy-Umgebungen die sicherere Wahl.

Siehe auch

SVGPointList SVGPointList.numberOfItems SVGPointList.replaceItem() SVGPointList.appendItem() SVGPolygonElement.points MediaList.item()