Fill rules

SVG offers two different fill rules to determine how the partial areas which result are to be filled for intersecting paths.

Fill rule “evenodd”

With the evenodd fill rule, an imaginary line is drawn out from the shape for each partial area and the number of lines that cross is counted. If this number is even, the area is not filled. If, on the other hand, the number of intersection points is odd, this area is filled.

<polygon points="50.202,9.5 29.277,70.926 90.298,50 29.277,29.075 50.202,90.5 71.128,29.075 9.702,50 71.128,70.926"
         fill="#00B6A8" fill-rule="evenodd" />

Fill rule “nonzero”

With the nonzero fill rule, an imaginary line is drawn out from the shape for each partial area and the number of lines that cross is counted. Intersections which lie on a line that goes clockwise are calculated with -1, intersections on lines that go counterclockwise with +1. As long as the calculated sum is not zero, the area is filled.

<polygon points="50.202,9.5 29.277,70.926 90.298,50 29.277,29.075 50.202,90.5 71.128,29.075 9.702,50 71.128,70.926"
         fill="#00B6A8" fill-rule="nonzero" />