How to use Polygon SVG shape in HTML5
In this article I have describe about a examples of Polygon in HTML5.
Read about SVG here
Polygon predefine SVG shape in HTML5
<polygon> is use to create a Polygon shape
The polygon have minimum three line and the lines create a close shape. The meaning of polygon is poly means "many" and gon means "angle" .
Example 1:
Lets draw a Polygon
|
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="18,9 270,18, 153,45" fill="blue" />
</svg>
</body>
</html>
|
Output
Define the code
- html define the DOCTYPE in this program.
- The points defines each corner of the polygon.
- Points define x and y coordinates of each corner.
- The line are create a close polygon.
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here