Understanding the graphics fill rules for SVG

The graphics fill rule for SVG is specified by the fill-rule property.

Valid values:	Nonzero | EvenOdd | Inherit
Default value:	Nonzero

The Fill-rule property is used to specify which algorithm is used to determine whether an area on the canvas belongs to the "inside" of the drawing (the inner area is populated). For a simple no-cross path, which area is "internal" is very intuitive to clear. However, for a complex path, such as a self-intersecting or a sub-path enclosing another subpath, the "inner" understanding is less clear.

　　

Nonzero

It literally means "not 0." According to this rule, to determine whether a point in the graph, from the point of a ray in any direction, and then detect the ray and graphics path intersection. Counting from 0 onwards, the path passes from left to right through the ray and the count is 1, and the right-to-left pass through the ray counts minus 1. After the result of the count, if the result is 0, the point is considered to be outside the graph, otherwise it is considered internal. Demonstrates the nonzero rule:

Click to view the sample SVG file (for SVG-enabled browsers only)

EvenOdd

It literally means "odd and even". According to this rule, to determine whether a point is within the graph, a ray from that point in any direction, and then detect the number of points of intersection of the Ray and the graphics path. If the result is odd then the point is considered to be inside, and the even number is considered to be the point outside. Demonstrates the evenodd rule:

Click to view the sample SVG file (for SVG-enabled browsers only)

(Hint: The above explanation does not indicate what to do when the path fragment coincides with the ray or tangent, because the ray in any direction is possible, then simply select another ray without this particular case.) )

Understanding the graphics fill rules for SVG