SVG polygon

SVG Polygon - <polygon>
Example 1


The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

Remark Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>



For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The points attribute defines the x and y coordinates for each corner of the polygon

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>


For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

Use the <polygon> element to create a star:

Here is the SVG code:
Example
<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>


For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:
Example
<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:evenodd;" />
</svg>
NEXT