SVG Polygon<polygon>

In SVG, the<polygon>element is used to draw polygons, and it is one of the commonly used basic shapes in SVG.

Using the<polygon>element, you can create closed polygons, and you can control the polygon's vertex coordinates, fill color, border color, etc. by setting attributes.

Basic Syntax

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="width"             <!-- 多边形的边框宽度 -->
/>

Attribute explanation:

  • pointsThe attribute defines the coordinates of each vertex of the polygon. The coordinates of multiple vertices are separated by spaces or commas, and each pair of coordinates is separated by a comma.

  • fillThe attribute defines the fill color of the polygon.

  • strokeThe attribute defines the border color of the polygon.

  • stroke-widthThe attribute defines the border width of the polygon.

The following code draws a polygon with an orange fill, a black stroke, and a stroke width of 2 pixels. Its vertex coordinates are (100, 10), (150, 190), and (50, 190), forming a closed triangle.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" fill="orange" stroke="black" stroke-width="2" />
</svg>

Example 1

The <polygon> tag is used to create shapes with no fewer than three sides.

A polygon is made up of straight lines, and its shape is "closed" (all the lines are connected).

Remark"Polygon" comes from Greek. "Poly" means "many", and "gon" means "angle".

The following is the SVG code:

Example

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>

Try it Yourself »

Click to view:View the SVG file。

Code explanation:

  • The points attribute defines the x and y coordinates of each corner of the polygon.

Example 2

The following example creates a four-sided polygon:

The following is the SVG code:

Example

<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>

Try it Yourself »

Click to view:View the SVG file。

Example 3

Use the <polygon> element to create a star:

The following is the SVG code:

Example

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>

Try it Yourself »

Click to view:View the SVG file。

Example 4

Change the fill-rule attribute to "evenodd":

The following is the SVG code:

Example

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

Try it Yourself »
Click to view:View the SVG file。 Other Extensions