W3docs
de
Anmelden

SVG Polygon

Auf dieser Seite finden Sie nützliche Informationen zum SVG <polygon>-Element, sehen Beispiele zur Verwendung und können selbst eines erstellen.

Beschreibung des <polygon>-Elements

Das SVG-Element <polygon> erstellt eine geschlossene Form aus geraden Liniensegmenten. Ein Polygon wird durch eine Liste von Eckpunkten (mindestens drei) definiert, und die Form wird automatisch geschlossen: Der Browser zeichnet eine abschließende Linie vom letzten Punkt zurück zum ersten, sodass Sie die Startkoordinate nicht wiederholen müssen.

Dieses automatische Schließen ist der wesentliche Unterschied zwischen <polygon> und <polyline>: Eine Polylinie zeichnet dieselben verbundenen Liniensegmente, lässt den Pfad jedoch offen (kein Segment zurück zum Anfang). Verwenden Sie <polygon> für gefüllte, geschlossene Formen wie Dreiecke, Sterne oder Pfeile, und <polyline> für offene Pfade wie Zickzacklinien oder Diagramme.

Das points-Attribut

Die Form wird vollständig durch das points-Attribut beschrieben. Es enthält eine Liste von x,y-Koordinatenpaaren in Benutzereinheiten:

points="x1,y1 x2,y2 x3,y3 ..."
  • Jedes Paar ist ein einzelner Eckpunkt des Polygons.
  • Paare werden durch Leerzeichen getrennt; innerhalb eines Paares werden die Werte x und y durch ein Komma (oder Leerzeichen — 220 30 270 210 ist ebenfalls gültig, aber die Kommaform ist leichter lesbar) getrennt.
  • Koordinaten sind absolut und werden von der oberen linken Ecke des SVG-Canvas gemessen, wobei y nach unten zunimmt.

So definiert points="220,30 270,210 180,230" drei Eckpunkte und erzeugt, da die Form automatisch geschlossen wird, ein Dreieck.

Beispiel des SVG-Elements <polygon> mit drei Seiten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250" >
      <polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Probier es selbst »

Hier listet das points-Attribut drei Eckpunkte auf — 220,30, 270,210 und 180,230 — und der Browser verbindet sie und schließt die Form zu einem Dreieck.

Gestaltung: fill, stroke und stroke-width

Das visuelle Erscheinungsbild wird durch Präsentationsattribute gesteuert. Diese sind nicht spezifisch für <polygon> — sie gelten für jede SVG-Form, und jedes hat eine entsprechende CSS-Eigenschaft. Sie können sie inline setzen (wie in style="..." oben), als einfache Attribute (fill="yellow") oder über ein CSS-Stylesheet:

  • fill — die Farbe, die zum Ausfüllen des Forminneren verwendet wird.
  • stroke — die Farbe der Kontur.
  • stroke-width — die Stärke der Kontur in Benutzereinheiten.

Da es sich um echte CSS-Eigenschaften handelt, überschreibt eine Stylesheet-Regel wie polygon { fill: yellow; stroke: green; } einfache fill/stroke-Attribute, wird aber selbst durch ein inline style überschrieben.

Beispiel des SVG-Elements <polygon> mit vier Seiten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Probier es selbst »

Das Hinzufügen weiterer Koordinatenpaare fügt einfach mehr Eckpunkte hinzu. Die vier Punkte oben ergeben ein Viereck; Sie können so viele Punkte angeben, wie die Form benötigt.

Ein reguläres Polygon erstellen

Ein reguläres Polygon (gleichseitiges Dreieck, Quadrat, Pentagon, Hexagon usw.) hat alle Seiten und Winkel gleich. Es gibt kein eigenes Attribut dafür — Sie platzieren die Eckpunkte selbst auf einem Kreis. Für n Seiten auf einem Kreis mit Radius r mit Mittelpunkt (cx, cy) liegt jeder Eckpunkt i bei:

x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)

In der Praxis werden die Punkte üblicherweise vorab berechnet (von Hand oder mit einem kleinen Skript) und in das points-Attribut eingetragen. Das Dreieck- und Viereckbeispiel oben verwendet handverlesene Koordinaten, sodass ihre Seiten nicht exakt gleich sind.

Beispiel des SVG-Elements <polygon> zur Erstellung eines Sterns:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="230" >
      <polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Probier es selbst »

fill-rule verstehen (warum das Sternzentrum hohl ist)

Wenn sich der Umriss einer Form selbst überkreuzt — wie es bei einem fünfzackigen Stern der Fall ist — muss der Browser entscheiden, welche eingeschlossenen Bereiche als „innen" gelten und gefüllt werden sollen. Das Präsentationsattribut fill-rule steuert diese Entscheidung. Es akzeptiert einen von zwei Werten:

  • nonzero (der Standard) — wird im Sternbeispiel oben verwendet. Für jeden Bereich zeichnet der Browser einen imaginären Strahl nach außen und zählt, wie der Pfad ihn kreuzt: +1 für jede Kreuzung in eine Richtung, -1 für die andere. Ist die Summe ungleich null, wird der Bereich gefüllt. Bei einem Stern, der in einem einzigen durchgehenden Strich gezeichnet wird, ergibt das innere Pentagon einen Wert ungleich null, wird also gefüllt — der Stern erscheint massiv.
  • evenodd — zählt die Kreuzungen unabhängig von der Richtung. Ist die Anzahl ungerade, wird der Bereich gefüllt; ist sie gerade, bleibt er transparent. Mit dieser Regel erhält das innere Pentagon des Sterns eine gerade Anzahl und bleibt hohl.

Daher wird das Zentrum durch einfaches Ändern von fill-rule:nonzero zu fill-rule:evenodd im Sternbeispiel durchsichtig — eine übliche Methode, um einen Sternumriss zu erstellen.

Attribute

AttributBeschreibung
pointsDie Liste der Punkte (Paare absoluter x,y-Koordinaten), die die Eckpunkte des Polygons definieren.
fill-ruleWie sich selbst überlappende Bereiche gefüllt werden: nonzero (Standard) oder evenodd.
pathLengthDie Gesamtlänge, als die der Pfad behandelt werden soll, in Benutzereinheiten. Die Einstellung ermöglicht es Attributen wie stroke-dasharray, Werte relativ zu dieser Länge statt zur tatsächlichen geometrischen Länge zu verwenden — nützlich, wenn Sie die Form nicht genau ausmessen möchten.

Wie alle SVG-Formen akzeptiert <polygon> auch die Präsentationsattribute fill, stroke und stroke-width sowie die Globalen Attribute und Ereignisattribute.

Verwandte Seiten

  • SVG Polyline — das offene Gegenstück zu <polygon>.
  • SVG Path — <path>, das flexibelste Element zum Zeichnen von Kurven und komplexen Formen.
  • SVG Referenz — die vollständige Liste der SVG-Elemente und -Attribute.

Übung

Übung
Welche Aussagen über das SVG-Element <polygon> sind wahr?
Welche Aussagen über das SVG-Element <polygon> sind wahr?
Was this page helpful?