Clip and fill rules
Polygons, polylines (fill-rule) and clipping planes (clip-rule) all use an attribute to decide where the inside of an object is. The attribute can either use the rule 'evenodd' or 'nonzero'. Both rules work by starting with a count of 0 and fill sections based on this count. This count changes when a ray intersects with a line segment of the graphic element being filled.
Attribute | Values | Initial | Comments |
fill-rule | (nonzero | evenodd | inherit) | nonzero | nonzero - object fully filled. evenodd - alternates across line boundaries. |
clip-rule | (nonzero | evenodd | inherit) | nonzero | Only applies to graphics inside a clipPath. Ignored otherwise. |
The nonzero rule (default) works by taking a ray from inside the graphic element and going outside to infinity. At each intersection point of the ray and the line/curve segments of the graphic element you compute the slope and rotate it 90 degrees counterclockwise. A vector pointed in the same direction of the ray (dot product > 0) adds 1 to the count and one in the opposite direction (dot product < 0) adds -1. A final number which is not zero results in the filling of that point.
The evenodd rule works by taking a point in the shape and counting the number of times a ray from that point to infinity crosses the line/curve segments of the graphic element. An odd count means the point is inside the shape. In both cases, if the polyline or path is not closed (start and end points have the same x and y coordinates) it is automatically closed to compute the interior segments of the shape.