SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <polygon> element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments.
Syntax:
<polygon points="Pair of points required to draw the shape" stroke="stroke color" fill="fill color for colored closed shapes">
Attributes:
- points: Pair of points required to draw the shape
- pathLength: It tells the total length of the path.
Few examples are given below for a better understanding of the <polygon> SVG element.
Example 1:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< body >
< svg width = "400px" height = "400px" >
<!-- try different pairs and make different shapes-->
< polygon points = "0, 100 100, 100 100, 100 100, -20000" fill = "green" >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
svg{
background-color: black;
}
</ style >
< body >
< svg width = "200px" height = "200px" >
<!-- try different pairs and make different shapes-->
< polygon points = "100, 100 15, 205 150, 7 20, 0"
fill = "green" stroke = "yellow" >
</ svg >
</ body >
</ html >
|
Output:
Browsers supported: Below given are the browsers supported by this svg element.
- Chrome
- Edge
- Opera
- Internet explorer
- Safari
- Firefox