W3Schools.com

SVG <polygon>

SVG Polygon - <polygon>

Example 1

The <polygon> element is used to create a graphic that contains at least three sides:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

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

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Example 3

Use the <polygon> element to create a star:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE