4.5 Polygons

<polygon points = "x1 y1 x2 y2 x3 y3 .... xk yk"/>

Noticee that x-coordinates and y-coordinates can be separated by commas or whitespaces, no matter which way.

<svg width="200px" height="200px" viewBox="0 0 100 100">
    <use xlink:href="grids.svg#grid_100x100"/>
    <!-- triangle -->
    <polygon points ="60 90 90 90 70 60"
    style="fill:rgba(44,95,45,0.2); stroke:rgba(44,95,45,1);  stroke-width:1"/>
    <!-- parallelogram -->
    <polygon points ="10 10, 50 10, 70 30, 30 30"
    style="fill:rgba(44,95,45,0.2); stroke:rgba(44,95,45,1);  stroke-width:1"/>
    <!-- star -->
    <polygon points ="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1"
    style="fill:rgba(44,95,45,0.2); stroke:rgba(44,95,45,1);  stroke-width:1"/>
</svg>
Filling polygons that have intersecting lines

fill:none

fill:rgba(44,95,45,0.2);

fill-rule:nonzero (default)

fill-rule: evenodd;