Horje
SVG Polygon

The SVG (Scalable Vector Graphics ) Polygon the <polygon> element wrapped inside the <SVG> element is used to create a polygon. The meaning of a polygon is a shape having many angles. It must have at least three sides to make Polygon. The points of the polygon are defined with the attribute points and for giving style there are different attributes like stroke-width, stroke to define stroke color, and fill used to fill the area.

Example: The example illustrates the creation of an SVG Polygon.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>SVG Polygon</title>
</head>
  
<body>
    <svg height="210" width="500">
        <polygon points="190,20 200,150 130,190 200,250" 
                 fill="rgb(16, 93, 16)" 
                 stroke="rgb(77, 19, 77)"
                 stroke-width="1" />
    </svg>
</body>
  
</html>

Output:

polygon1

 

Example 2: This is another example that illustrates the creation of an SVG Polygon.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>SVG Polygon</title>
</head>
  
<body>
    <svg height="310" width="600">
        <polygon points="180,20 200,180 250,250 20,50" 
                 fill="rgb(84, 152, 84)" 
                 stroke="rgb(77, 19, 77)"
                 stroke-width="2"/>
    </svg>
</body>
  
</html>

Output:

poly

 


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Canvas Gradients HTML Canvas Gradients
SVG Polyline SVG Polyline
SVG Circle SVG Circle
HTML Canvas Circles HTML Canvas Circles
HTML Canvas Rectangles HTML Canvas Rectangles

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje