Visualizing the difference between nonzero and evenodd fill rules
<svg width="200" height="200" viewBox="0 0 200 200">
<path
d="M50,50 h100 v100 h-100 Z M75,75 h50 v50 h-50 Z M100,25 l75,75 l-75,75 l-75,-75 Z"
fill="hsl(150, 50%, 60%)"
fillRule="nonzero"
/>
</svg><svg width="200" height="200" viewBox="0 0 200 200">
<path
d="M50,50 h100 v100 h-100 Z M75,75 h50 v50 h-50 Z M100,25 l75,75 l-75,75 l-75,-75 Z"
fill="hsl(150, 50%, 60%)"
fillRule="evenodd"
/>
</svg>The path above creates three squares, all drawn in a clockwise direction.
What would happen if the path of the diamond square was directed counter-clockwise?
<svg width="200" height="200" viewBox="0 0 200 200">
<path
d="M50,50 h100 v100 h-100 Z M75,75 h50 v50 h-50 Z M100,25 l-75,75 l75,75 l75,-75 Z"
fill="hsl(150, 50%, 60%)"
fillRule="nonzero"
/>
</svg><svg width="200" height="200" viewBox="0 0 200 200">
<path
d="M50,50 h100 v100 h-100 Z M75,75 h50 v50 h-50 Z M100,25 l-75,75 l75,75 l75,-75 Z"
fill="hsl(150, 50%, 60%)"
fillRule="evenodd"
/>
</svg>Note that the new path value produces the same shape as the previous one.
The fill-rule property indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.
The fill-rule property provides two options for how the inside of a shape is determined:
nonzero
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.
evenodd
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
Source: W3C SVG 2 Specification