SVGPolylineElement.animatedPoints — Eigenschaft · JavaScript-Referenz

Signatur

SVGPolylineElement.animatedPoints

Beschreibung

Die Eigenschaft animatedPoints liefert eine schreibgeschützte SVGPointList mit den Punkten, die ein <polyline>-Element gerade tatsächlich nutzt. Läuft eine deklarative SVG-Animation (z. B. <animate attributeName="points">), steht hier der animierte Zwischenwert. Sonst entspricht der Inhalt dem Grundwert aus points.

Die Eigenschaft ist die Gegenstück zu SVGPolylineElement.points. points ist der veränderbare Grundwert (baseVal), über den Sie Punkte per Skript hinzufügen, ersetzen oder entfernen. animatedPoints dient nur zum Lesen, etwa um den momentanen Verlauf einer Animation auszuwerten, Punkte für eine Kollisionsprüfung abzufragen oder Debug-Ausgaben zu erzeugen.

Die zurückgegebene Liste ist live. Ändert sich das Attribut oder die Animation, aktualisiert sich dasselbe Listenobjekt automatisch. Die einzelnen Einträge erhalten Sie mit getItem(index) oder in aktuellen Browsern per Index bzw. for...of. Jeder Eintrag ist ein DOMPoint (früher SVGPoint) mit den Eigenschaften x und y.

Rückgabewert

Typ

SVGPointList

Beschreibung

Eine live aktualisierte, schreibgeschützte Liste von DOMPoint-Objekten mit dem animierten (aktuell dargestellten) Wert des points-Attributs.

Beispiele

Punkte einer Polylinie auslesen

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 50,25 100,0');
svg.append(line);
document.body.append(svg);

const list = line.animatedPoints;
console.log('Anzahl:', list.numberOfItems);
for (let i = 0; i < list.numberOfItems; i++) {
  const { x, y } = list.getItem(i);
  console.log(`Punkt ${i}: (${x}, ${y})`);
}

Anzahl: 3 Punkt 0: (0, 0) Punkt 1: (50, 25) Punkt 2: (100, 0)

Grundwert und animierten Wert während einer SMIL-Animation vergleichen

// HTML:
// <svg width="200" height="100">
//   <polyline id="wave" points="0,50 100,50 200,50" fill="none" stroke="black">
//     <animate attributeName="points" dur="2s" repeatCount="indefinite"
//              values="0,50 100,50 200,50; 0,50 100,10 200,50; 0,50 100,50 200,50" />
//   </polyline>
// </svg>
const wave = document.getElementById('wave');

setTimeout(() => {
  const base = wave.points.getItem(1);
  const anim = wave.animatedPoints.getItem(1);
  console.log('Grundwert y:', base.y);
  console.log('Animiert y:', anim.y.toFixed(1));
}, 500);

Grundwert y: 50 Animiert y: 30.0 (Wert hängt vom Zeitpunkt und Browser ab)

Die Liste ist live und schreibgeschützt

const line = document.querySelector('polyline');
const animated = line.animatedPoints;

// Änderung über den Grundwert wirkt sich auf die Live-Liste aus
line.setAttribute('points', '10,10 20,20');
console.log(animated.numberOfItems);

try {
  animated.clear();
} catch (err) {
  console.log(err.name);
}

// Richtig: Änderungen immer über points vornehmen
const svg = line.ownerSVGElement;
const p = svg.createSVGPoint();
p.x = 30; p.y = 5;
line.points.appendItem(p);
console.log(animated.numberOfItems);

2 NoModificationAllowedError 3

// Wichtig · Fallstricke

Nur lesbar: Aufrufe wie clear(), appendItem() oder replaceItem() auf animatedPoints lösen eine DOMException vom Typ NoModificationAllowedError aus. Schreiben Sie stattdessen über points oder setAttribute('points', …).
Animationen: Nur deklarative SMIL-Animationen (<animate>) wirken sich auf den animierten Wert aus. CSS-Animationen und Web-Animations-API können points nicht animieren, weil points keine CSS-Eigenschaft ist. Wie genau der Zwischenwert während einer Animation zurückgegeben wird, war zwischen den Browsern früher unterschiedlich. Verlassen Sie sich darauf also nicht bei framegenauer Logik.
Listeneinträge: In aktuellen Browsern sind die Einträge DOMPoint-Objekte. SVGPoint gibt es nur noch als veralteten Alias. Den Index-Zugriff (list[0]) und die length-Eigenschaft unterstützen nicht alle älteren Engines. Am sichersten sind getItem() und numberOfItems.
Ungültige Punktangaben im Attribut (z. B. eine ungerade Anzahl von Koordinaten) führen dazu, dass die Liste nur bis zum letzten gültigen Punkt gefüllt wird.
Dieselbe Eigenschaft gibt es auch bei SVGPolygonElement.

Siehe auch

SVGPolylineElement SVGPolylineElement.points SVGPolygonElement.animatedPoints SVGPointList DOMPoint SVGSVGElement.createSVGPoint()