How to use Polygon SVG shape in HTML5

Posted in HTML 5 | Learn HTML 5 July 15, 2012
Tags: HTML5, SVG in HTML5, polygon in SVG, SVG, SVG shapes, polygon in HTML5, HTML5 SVG  
In this article I have describe about a examples of Polygon in HTML5.  
  • 2449

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

polygon image.jpg

 

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

© 2019 DotNetHeaven. All rights reserved.