Signatur
Beschreibung
animatedPoints gibt eine SVGPointList zurück, die die Eckpunkte eines <polygon>-Elements so enthält, wie sie gerade dargestellt werden. Läuft eine SMIL-Animation (z. B. <animate attributeName="points">), enthält die Liste die interpolierten Zwischenwerte. Ohne aktive Animation ist ihr Inhalt identisch mit dem Basiswert aus points.
Die Eigenschaft ist das Gegenstück zu SVGPolygonElement.points: points steht für den Basiswert (Attributwert, veränderbar), animatedPoints für den animierten Wert (nur lesbar). Sie nutzen das zum Beispiel, um während einer Animation die aktuelle Form auszulesen, etwa für Kollisionsprüfungen, Tooltips oder um eine Animation an der aktuellen Position „einzufrieren“.
Jeder Eintrag der Liste ist ein Punktobjekt mit den Eigenschaften x und y (in SVG 2 DOMPoint, in älteren Implementierungen SVGPoint). Die Koordinaten liegen im lokalen Benutzerkoordinatensystem des Elements, also vor Anwendung von transform.
Rückgabewert
points automatisch aktualisiert.Beispiele
Aktuelle Eckpunkte eines Polygons auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const polygon = document.createElementNS(svgNS, 'polygon');
polygon.setAttribute('points', '10,10 90,10 50,80');
svg.append(polygon);
document.body.append(svg);
const list = polygon.animatedPoints;
const coords = [];
for (let i = 0; i < list.numberOfItems; i++) {
const { x, y } = list.getItem(i);
coords.push(`${x},${y}`);
}
console.log(coords.join(' '));Basiswert vs. animierter Wert während einer SMIL-Animation
// <svg><polygon id="shape" points="0,0 100,0 50,50">
// <animate attributeName="points" dur="2s" repeatCount="indefinite"
// to="0,0 100,0 50,100" />
// </polygon></svg>
const shape = document.getElementById('shape');
setTimeout(() => {
const base = shape.points.getItem(2);
const anim = shape.animatedPoints.getItem(2);
console.log('Basis-y:', base.y);
console.log('Animiert-y:', anim.y.toFixed(1));
}, 1000);Animation an aktueller Form einfrieren
const freeze = (polygon) => {
const list = polygon.animatedPoints;
const pts = Array.from({ length: list.numberOfItems }, (_, i) => {
const p = list.getItem(i);
return `${p.x},${p.y}`;
});
// Animationen entfernen und aktuelle Form als Basiswert übernehmen
polygon.querySelectorAll('animate').forEach((a) => a.remove());
polygon.setAttribute('points', pts.join(' '));
return pts;
};
console.log(freeze(document.querySelector('polygon')));// Wichtig · Fallstricke
- Nur lesbar: Wenn Sie versuchen, die Liste zu verändern (
appendItem(),clear(),replaceItem()…), wird einNoModificationAllowedErrorausgelöst. Änderungen an der Form machen Sie überpointsodersetAttribute('points', …). - Nur SMIL: CSS-Animationen und die Web Animations API wirken nicht auf das
points-Attribut.animatedPointsspiegelt daher nur SMIL-Animationen (<animate>,<set>) wider. - Lebende Liste: Wenn Sie eine Momentaufnahme brauchen, kopieren Sie die Werte (
x/y). Eine gespeicherte Referenz auf die Liste zeigt sonst später andere Werte. - Nutzen Sie für die Anzahl der Punkte
numberOfItems.lengthund die Iteration mitfor…ofsind neuer und werden nicht überall gleich unterstützt. - Die Koordinaten beachten kein
transform. Bildschirmkoordinaten berechnen Sie mitgetScreenCTM(). - Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Eigenschaft seit Langem. Manche Browser implementieren den animierten Wert allerdings nicht vollständig und liefern dann einfach den Basiswert.