SVG <polygon> Draw Polygon

The polygon element defines a closed polygon shape composed of a set of connected straight line segments, with the last point connected to the first point. The <polygon> element is usually used to draw polygons with multiple (3or more) sides/shape of the edge.

SVG Polygon Example

This is a simple SVG polygon example:

<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:

You may have noticed that even if only listed3points, and all of them are drawn3There are 6 sides. This is because the <polygon> element draws lines between all points, including a line from the last point to the first point. The <polyline> does not draw a line from the last point to the first point. This seems to be the only difference between the <polygon> and <polyline> elements.

Draw a hexagon

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>

The running effect is as follows

Draw an octagon

This is a larger example-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 Pentagon

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: