The best SVG polygon Tutorial In 2024, In this tutorial you can learn
SVG polygon - <polygon>,Example 1,Examples,Example 2,Examples,Example 3,Examples,Example 4,Examples,
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 <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 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 <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 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 <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 SVG file (right-click on the preview source SVG graphics).
Example 4 Change the fill-rule attribute "evenodd":
Here is the SVG Code:
Examples <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>
For Opera users: view SVG file (right-click on the preview source SVG graphics).