fill-rule property
Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
![]() ![]() |
Syntax
fill-rule: nonzero | evenodd | inherit
Property values
nonzero-
Default. This rule determines where within the canvas a point falls, or the point's insideness, in relation to the canvas. The location of the point 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.
inherit-
Indicates that the property takes the same computed value as the property for the element's parent.
CSS information
| Applies To | shapes and text content elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | nonzero |
Standards information
Remarks
As of Microsoft Edge, this presentation attribute is animatable with CSS Animations and CSS Transitions.
See also
- CSSStyleDeclaration
- currentStyle
- style
- SVGCircleElement
- SVGEllipseElement
- SVGLineElement
- SVGPathElement
- SVGPolygonElement
- SVGPolylineElement
- SVGRectElement
- SVGTextElement
- SVGTextPathElement
- SVGTSpanElement

