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" >
< 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" >
< 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
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...