The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.

Note: As a presentation attribute fill-rule can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it has effect only on the following height elements: <altGlyph>, <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, and <tspan>

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Default value for fill-rule -->
  <polygon fill-rule="nonzero" stroke="red"
   points="50,0 21,90 98,35 2,35 79,90"/>

  <!--
  The points in the center of the shape has 2
  path segments (materialized by the red stroke)
  between them and Infinity therefor there are
  considered outside the shape, that's why the
  interior of the star is hollow (but not the branch).
  -->
  <polygon fill-rule="evenodd" stroke="red"
   points="150,0 121,90 198,35 102,35 179,90"/>
</svg>

Usage notes

Value nonzero | evenodd
Default value nonzero
Animatable Yes

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

nonzero

The value nonzero 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.

Example

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of fill rule on crossing path segements -->
  <polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>
 
  <!--
  Effect of fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (to the "right")
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>
 
    <!--
  Effect of fill rule on a shape inside a shape
  with the path segment moving in opposite direction
  (to the "left" the to the "right")
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

evenodd

The value evenodd 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.

Example

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of fill rule on crossing path segements -->
  <polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>
 
  <!--
  Effect of fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (to the "right")
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>
 
    <!--
  Effect of fill rule on a shape inside a shape
  with the path segment moving in opposite direction
  (to the "left" the to the "right")
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

Specification

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'fill-rule' in that specification.
Candidate Recommendation Definition for shapes and text
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'fill-rule' in that specification.
Recommendation Initial definition for shapes and text

 

Document Tags and Contributors

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