SVG <polygon> Draw a Polygon

Das <polygon>-Element definiert eine geschlossene Polygonform, die aus einer Gruppe von aufeinanderfolgenden Linienabschnitten besteht, wobei der letzte Punkt mit dem ersten Punkt verbunden ist. Das <polygon>-Element wird normalerweise verwendet, um Polygone mit mehreren (3Seiten (oder mehr)/Form der Kante.

SVG Polygon Beispiel für Polygon

Dies ist ein einfaches Beispiel für ein SVG-Polygon

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="10,0　　60,0　　35,50"
　　　　　　　　　style="stroke:#660000; fill:#cc3333;"/>
</svg>

The effect after running is as follows:

Sie haben vielleicht bemerkt, dass selbst wenn nur3Punkten, und alle wurden gezeichnet3Seiten. Dies liegt daran, dass das <polygon>-Element zwischen allen Punkten eine Linie zeichnet, einschließlich einer Linie von dem letzten Punkt zum ersten Punkt. Das <polyline>-Element fängt nicht von dem letzten Punkt zum ersten Punkt an zu zeichnen. Dies scheint der einzige Unterschied zwischen den <polygon>- und <polyline>-Elementen zu sein.

Zeichnen Sie ein Sechseck

The example code is as follows:

<svg width="120" height="120" viewPort="0 0　120　120" version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon points="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

Das Laufeffekt ist wie folgt

Zeichnen Sie ein Achteck

Dies ist ein größeres Beispiel-8sided polygon (octagon):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="50,5　　　100,5　　125,30　　125,80　100,105
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000; fill:#cc3333; stroke-width:　3;"/>
</svg>

SVG Draw a Pentagram

The example code is as follows:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<polygon points="100,10　40,180　190,60　10,60　160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;/>
</svg>

The effect after running is as follows: