SVGPolygonElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGPolygonElement extends SVGGeometryElement

Beschreibung

SVGPolygonElement ist die DOM-Schnittstelle für das SVG-Element <polygon>. Ein Polygon besteht aus einer Folge von Punkten, die durch gerade Linien verbunden sind. Anders als bei <polyline> wird der letzte Punkt automatisch wieder mit dem ersten verbunden, die Form ist also immer geschlossen. Typische Anwendungen sind Dreiecke, Sterne, Pfeile, Hexagon-Raster, Radar- bzw. Netzdiagramme und frei gezeichnete Flächen in Editoren.

Die Schnittstelle erbt von SVGGeometryElement und damit auch von SVGGraphicsElement und SVGElement. Daher stehen geometrische Methoden wie getTotalLength(), getPointAtLength(), isPointInFill(), isPointInStroke() und getBBox() zur Verfügung.

Eigene Eigenschaften (aus dem SVG-Mixin SVGAnimatedPoints):

points – ein SVGPointList mit den Basiswerten des Attributs points. Die Liste ist „live“: Wenn man sie ändert, wird das Attribut aktualisiert, und umgekehrt.
animatedPoints – ein schreibgeschütztes SVGPointList mit den aktuell animierten Werten (z. B. während einer SMIL-Animation).

Eigene Methoden definiert die Schnittstelle nicht. Für einfache Änderungen reicht oft setAttribute('points', …); für punktweise Manipulation ist die SVGPointList-API mit appendItem(), replaceItem() oder removeItem() geeignet.

Rückgabewert

Typ

SVGPolygonElement

Beschreibung

Instanzen erhält man über document.createElementNS('http://www.w3.org/2000/svg', 'polygon') oder über Abfragen wie querySelector('polygon'). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Polygon per JavaScript erzeugen (Dreieck)

const SVG_NS = 'http://www.w3.org/2000/svg';

const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
svg.setAttribute('width', '200');

const triangle = document.createElementNS(SVG_NS, 'polygon');
triangle.setAttribute('points', '50,10 90,90 10,90');
triangle.setAttribute('fill', 'tomato');

svg.append(triangle);
document.body.append(svg);

console.log(triangle instanceof SVGPolygonElement);
console.log(triangle.points.numberOfItems);

true 3

Punkte über die SVGPointList auslesen und ändern

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

// Alle Punkte ausgeben
for (const p of polygon.points) {
  console.log(`(${p.x}, ${p.y})`);
}

// Neuen Punkt anhängen (bei svg.createSVGPoint() aus dem Wurzel-SVG)
const svg = polygon.ownerSVGElement;
const pt = svg.createSVGPoint();
pt.x = 30;
pt.y = 20;
polygon.points.appendItem(pt);

// Das Attribut wurde automatisch aktualisiert
console.log(polygon.getAttribute('points'));

(50, 10) (90, 90) (10, 90) 50,10 90,90 10,90 30,20

Regelmäßiges Vieleck berechnen und Umfang messen

const regularPolygon = (cx, cy, r, n) =>
  Array.from({ length: n }, (_, i) => {
    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
    return `${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`;
  }).join(' ');

const hexagon = document.querySelector('#hex');
hexagon.setAttribute('points', regularPolygon(50, 50, 40, 6));

// Geerbt von SVGGeometryElement: Umfang inkl. Schlusskante
console.log(hexagon.getTotalLength().toFixed(1));

240.0

Trefferprüfung mit isPointInFill()

const polygon = document.querySelector('polygon');
const svg = polygon.ownerSVGElement;

svg.addEventListener('click', (event) => {
  // Bildschirmkoordinaten in SVG-Koordinaten umrechnen
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());

  const inside = polygon.isPointInFill(pt);
  console.log(inside ? 'Im Polygon geklickt' : 'Daneben');
});

Im Polygon geklickt

// Wichtig · Fallstricke

Namespace beachten: document.createElement('polygon') erzeugt ein wirkungsloses HTMLUnknownElement. Man muss createElementNS('http://www.w3.org/2000/svg', 'polygon') verwenden.
Live-Liste: points ist eng mit dem Attribut verknüpft. Wird setAttribute('points', …) aufgerufen, ändern sich die Einträge der Liste. Zwischengespeicherte SVGPoint-Referenzen können danach auf veraltete Objekte zeigen.
Ungültige Punktangaben: Bei einer ungeraden Anzahl an Koordinaten oder Syntaxfehlern wird das Polygon nur bis zum letzten gültigen Punkt gezeichnet – oft ohne Fehlermeldung in der Konsole.
Iteration: Direktes Iterieren mit for…of über SVGPointList wird in aktuellen Browsern unterstützt. Für ältere Umgebungen verwendet man getItem(i) zusammen mit numberOfItems.
animatedPoints spiegelt nur SMIL-Animationen wider, keine CSS- oder Web-Animations-Änderungen.
SVGPoint bzw. createSVGPoint() gelten als veraltet. Moderne Browser akzeptieren bei appendItem() auch DOMPoint-Objekte, Safari ältere Versionen jedoch nicht zuverlässig.
Kompatibilität: Die Schnittstelle selbst wird in allen modernen Browsern unterstützt. isPointInFill() und isPointInStroke() sind erst in neueren Versionen verfügbar (Chrome 60+, Firefox 69+, Safari 12+).

Siehe auch

SVGPolylineElement SVGPatternElement SVGEllipseElement SVGFEFloodElement SVGFilterElement