<polygon />

Objective: Learn to draw, position and style polygons.

8.1 The polygon element

<polygon points="200,100 350,300 50,300"></polygon>

<polygon> ... </polygon> The full line element with open and closing tags.

<polygon /> Because this does not contain any content it can also be  used as a self-closing element.

Polygons are almost exactly the same as polylines except they automatically close themselves. Polygon is a very important shape for math/geometry.

8.2 Polygon construction attributes

Polygons are are groups of connected straight lines where the first and last points automatically close themselves. All the points are included in one attribute.

points a set of points setting the layout points of the polygon. Each number must be separated by a space, comma, EOL or line feed character.  Each point must have two numbers an x coordinate and a y coordinate.

Example 1<polygon />

 Here is a simple triangle defined by three points. Here we are using a comma between x and y coordinates to make it easier to understand the coordinate X,Y pairs. IE. Each comma should have a number before and after it.

<polygon
    points="200,100 350,300 50,300"
    stroke="green" 
    stroke-width="4"
    fill="none">
</polygon>

 Example 2 <polygon />  Hexagon

It is easy to construct complex polylines if you draw the shape on graph paper and plot the points first. You can use the IGP-SVG Primitive design sheet for this. In this example the X,Y coordinates are stacked vertically to make them easier to read. SVG allows this deliberately.

<polygon 
points="
    200,75  
    308,138 
    308,268 
    200,325 
    92,263 
    92,138"
    fill="rgba(0, 255, 255, 0.5)"
    stroke="black"
    stroke-width="4">
</polygon>

 Copy and paste this example into the SVG Editor.

 Example 3. Very Useful polygons

This is a collection of useful geometry triangles and regular polygons that you should always have available.

Polygons do not have to be regular. They are just closed shapes with many sides. These shapes do not have any styles. You will have to apply those.

Copy and paste each of these defined polygons into the SVG Editor.

<!-- SHAPE - EQUILATERAL TRIANGLE -->
 <polygon points="
    200,50
    70, 275
    330,275" 
    fill="none"
    stroke="black"
    stroke-width="1"/>
<!-- ISOCELES TRIANGLE -->
<polygon points="
    200,50
    70, 275
    330,275"
    fill="none"
    stroke="black"
    stroke-width="1"
    transform="scale(0.8 1.15) translate(50,-6)" />
 <!-- SHAPE - SCALENE TRIANGLE -->
<polygon class="shape" points="
    30,50
    70, 275
    330,275"
    fill="none"
    stroke="black"
    stroke-width="1" />
<!-- RIGHT TRIANGLE -->
<polygon points="
    200,50
    70, 275
    330,275"
    fill="none"
    stroke="black"
    stroke-width="1"
     transform="skewX(-30) translate(160 0)" />
 <!-- SHAPE - PENTAGON -->
<polygon points="
    200,50
    58, 154
    112,321
    288,321
    342,154"
    fill="none"
    stroke="black"
    stroke-width="1" />
 <!-- SHAPE - HEXAGON -->
 <polygon points="
    350,200
    275,70
    125,70
    50,200
    125,330
    275,330"
    fill="none"
    stroke="black"
    stroke-width="1" />
<!-- SHAPE - HEPTAGON -->
 <polygon points="
    200,50
    82,106
    54,232
    135,335
    265,335
    347,234
    316,108"
    fill="none"
    stroke="black"
    stroke-width="1" />
 <!-- SHAPE - OCTAGON -->
 <polygon points="
    200,50
    94,94
    50,200
    94,306
    200,350
    306,306
    350,200
    306,94"
    fill="none"
    stroke="black"
    stroke-width="1" />
<!-- SHAPE - NONAGON -->
 <polygon points="
    200,50
    104,86
    53,174
    70,275
    148,341
    251,342
    330,275
    348,174
    297,86"
    fill="none"
    stroke="black"
    stroke-width="1" />
<!-- SHAPE - DECAGON -->
 <polygon points="
    200,50
    112,79
    58,154
    58,246
    112,321
    200,350
    288,321
    342,247
    342,154
     288,79"
    fill="none"
    stroke="black"
    stroke-width="1" />

 If you would like to see how these were created go to apex.infogridpacific.com. Notice these have all be drawn with integers. There are no floating point numbers. These are unnecessary for screen rendering, keep the filesize down and the lines sharp.

 SVG Editor

8.3  Exercises

1. Create a  triangle that touches the top center and goes down to the two bottom corners.
2. Create a triangle that touches the bottom center and goes up to the top two corners.
3. Create a square 200px wide and 200 pixels high in the center of the viewport with red stroke and yellow fill.
4. create a polygon that is 200px high and 200 px wide with eight sizes in the center of the viewport. (Draw it on graph paper first to work out the coordinates)
5. Cut and paste the different polygons examples above and apply styles.

For Cheaters

Here is the SVG for those who are too lazy to type the SVG. In these examples the X,Y points are stacked to make them easier to read. View the SVG Markup

<!--1. Triangle Touching the top-->
<polygon points="
    200,0 
    400,400 
    0,400" 
stroke="green" stroke-width="8" fill="none"></polygon>
<!--2. Triangle Touching the bottom->
<polygon points="
    200,400 
    400,0 
    0,0" 
stroke="green" stroke-width="8" fill="none"></polygon>
<!--3. Square in the middle ->
<polygon points="
    100,100 
    300,100 
    300,300 
    100,300" 
stroke="red" stroke-width="8" fill="yellow"></polygon>
<!--4. Polygon with eight sides ->
<polygon points="
    150,100 
    250,100 
    300,150 
    300,250
    250,300
    150,300
    100,250
    100,150" 
stroke="blue" stroke-width="8" fill="none"></polygon>