Polygons and Polylines

Tag description:

Polygons and polylines are sequences of points (vertices) joined successively by line segments. They differ in that the first and last vertex are joined in a polygon and not in a polyline. These tags are illustrated below:

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.

Source code:

Source of polygon.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      width="800px" height="200px" viewBox="0 0 800 200">   
04: 
05:   <polygon points="10,10 190,190 190,10" fill="orange" stroke="blue" stroke-width="5px"/>
06:   <polygon points="210,10 390,10 390,190 210,190 300,50 300,150" fill="orange" stroke="blue" stroke-width="5px"/>
07:   <polygon points="410,10 590,10 590,190 410,190 500,50 500,150" fill="orange" fill-rule="evenodd" stroke="blue" stroke-width="5px"/>
08:   <polyline points="610,10 790,190 790,10" fill="none" stroke="blue" stroke-width="5px"/>
09:   
10: </svg>
11:

The code is ordered so that the shapes on the left side of the figure appear first.

Comments on the Attributes:

The points attribute lists the vertices of the polygon or polyline in order. The points are of the form x,y separated by spaces.

The second and third polygon in the figure demonstrate the fill-rule attribute. The value of the attribute defaults to "nonzero", but can also be "evenodd".

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!