Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

fill-rule

This article needs a technical review. How you can help.

« SVG Attribute reference home

The fill-rule attribute indicates how to determine what side of a path is inside a shape, to determine how the fill property paints 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.

Usage context

Categories Presentation attribute
Value nonzero (default) | evenodd | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

The fill-rule property provides two options for how the inside of a shape is determined:

nonzero
This value determines the "insideness" of a point in the shape 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 value determines the "insideness" of a point in the shape 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.

Examples

Elements

The following elements can use the fill-rule attribute

Document Tags and Contributors

 Contributors to this page: Tigt, kscarfone, Jeremie, ratcliffe_mike
 Last updated by: Tigt,