fill-rule

The fill-rule CSS property defines the rule used to determine which parts of the SVG shape’s canvas are included inside a shape to be filled. If present, it overrides the element’s attribute.

The fill-rule clarifies which areas of a shape should be considered “inside” the shape. It provides two values you can set to tell the browser how the inside of a shape should be determined. For shapes that don’t have intersecting paths, like a circle, the bounds of what is inside a shape to be filled are intuitively clear. With complex shapes that include intersecting paths (such as a Venn diagram) or paths enclosing other paths (such as a donut), the interpretation of which sections of the shape are “inside” the shape and should be filled by the fill property, may not be obvious.

Syntax example: fill-rule: evenodd;