Vieleck

Mit dem <polygon>-Element können Sie eine Serie von Punkten definieren, welche mit geraden Linien verbunden werden. Die x- und y-Koordinaten werden durch ein Komma getrennt. Die Figur wird automatisch geschlossen, Sie müssen also nicht zwingend zurück zum Startpunkt gehen.

<polygon points="0,100 150,50 100,200 50,50 200,100
                 50,150 100,0 150,150" fill="#00B6A8" />

Solange sich die Linien im Polygon nicht schneiden, ist die Färbung der Fläche eindeutig. Wenn sich Verbindungslinien hingegen kreuzen, gibt es zwei verschiedene Arten, wie Sie das Polygon ausfüllen können. Weitere Informationen dazu finden Sie im Abschnitt Füllregeln.