SVG-Polygon<polygon>

In SVG wird das<polygon>-Element wird zum Zeichnen von Polygonen verwendet und ist eine der häufig verwendeten Grundformen in SVG.

Mit der<polygon>-Element können Sie geschlossene Polygone erstellen und durch Festlegen von Attributen die Eckpunktkoordinaten, Füllfarbe, Konturfarbe usw. des Polygons steuern.

Grundlegende Syntax

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="width"             <!-- 多边形的边框宽度 -->
/>

Attributerklärung:

  • points-Attribut definiert die Koordinaten jedes Eckpunkts des Polygons. Die Koordinaten mehrerer Eckpunkte werden durch Leerzeichen oder Kommas getrennt, und jedes Koordinatenpaar wird durch ein Komma getrennt.

  • fill-Attribut definiert die Füllfarbe des Polygons.

  • stroke-Attribut definiert die Konturfarbe des Polygons.

  • stroke-width-Attribut definiert die Konturbreite des Polygons.

Der folgende Code zeichnet ein Polygon mit oranger Füllung, schwarzer Kontur und einer Konturbreite von 2 Pixeln. Seine Eckpunktkoordinaten sind (100, 10), (150, 190) und (50, 190) und bilden ein geschlossenes Dreieck.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" fill="orange" stroke="black" stroke-width="2" />
</svg>

Beispiel 1

Das <polygon>-Tag wird verwendet, um Formen mit mindestens drei Seiten zu erstellen.

Ein Polygon besteht aus geraden Linien, und seine Form ist "geschlossen" (alle Linien sind verbunden).

Remark"Polygon" stammt aus dem Griechischen. "Poly" bedeutet "viele", und "gon" bedeutet "Winkel".

Das Folgende ist der SVG-Code:

Beispiel

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Code-Erklärung:

  • Das points-Attribut definiert die x- und y-Koordinaten jeder Ecke des Polygons.

Beispiel 2

Das folgende Beispiel erstellt ein vierseitiges Polygon:

Das Folgende ist der SVG-Code:

Beispiel

<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:SVG-Datei ansehen.

Beispiel 3

Verwenden Sie das <polygon>-Element, um einen Stern zu erstellen:

Das Folgende ist der SVG-Code:

Beispiel

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Beispiel 4

Ändern Sie das fill-rule-Attribut in "evenodd":

Das Folgende ist der SVG-Code:

Beispiel

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

Selbst ausprobieren »
Zum Anzeigen klicken:. Weitere Erweiterungen