SVG polygon
SVG polygon - <polygon>
Example 1
<Polygon> tag is used to create graphics containing at least three sides.
Polygons are straight lines, the shape is "closed" (all lines connected).
polygon from Greece. "Poly" a "many", "gon" means "angle".
Here is the SVG Code:
Examples
<Polygon points = "200,10 250,190 160,210"
style = "fill: lime; stroke: purple; stroke-width: 1" />
</ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
Code analysis:
- x and y coordinates of the points attribute definitions for each corner of the polygon
Example 2
The following example creates a four-sided polygon:
Here is the SVG Code:
Examples
<Polygon points = "220,10 300,210 170,250 123,234"
style = "fill: lime; stroke: purple; stroke-width: 1" />
</ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
Example 3
Use <polygon> element to create a star:
Here is the SVG Code:
Examples
<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 SVG file (right-click on the preview source SVG graphics).
Example 4
Change the fill-rule attribute "evenodd":
Here is the SVG Code:
Examples
<Polygon points = "100,10 40,180 190,60 10,60 160,180"
style = "fill: lime; stroke: purple; stroke-width: 5; fill-rule: evenodd;" />
</ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).