SVG Polygon

Description of the <polygon> elementΒΆ

The SVG <polygon> element creates a graphic containing at least three sides.

Polygons consist of straight lines, which are connected up, and its shape is "closed".

Example of the SVG <polygon> element with three sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250" >
      <polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

In this example the "points" attribute specifies the x and y coordinates for each corner of our polygon.

Example of the SVG <polygon> element with four sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Example of the SVG <polygon> element for creating a star:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="230" >
      <polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Attributes

Attribute Description
points This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon.
pathLength This attribute specifies the total length for the path, in user units.

The SVG <polygon> element also supports the Global Attributes and Event Attributes.




Do you find this helpful?

Related articles