La regla de llenado fill-rule
El atributo fill-rule es un atributo presentacional utilizado para establecer la parte interior de un trazado.
<path fill-rule="nonzero"...
También puede ser utilizado como propiedad CSS
path{fill-rule:nonzero;}
Puede tomar una de estas dos valores: nonzero u evenodd. El valor por defecto es nonzero.
Si fill-rule = evenodd el interior / exterior del trazado cambia cada vez que este se auto intersecta, como por ejemplo al dibujar una estrella:
See the Pen Estrella fill-rule*** by Gabi (@enxaneta) on CodePen.
Si fill-rule = nonzero todo depende de la dirección del trazado. Si una parte del trazado esta dibujada en un sentido y la otra parte en el sentido contrario el resultado será un trazado hueco como en el primer ejemplo del siguiente pen:
En este caso la región del trazado dibujada en el sentido contrario sera siempre un hueco independientemente del valor del atributo fill-rule.
Si las dos regiones del trazado están dibujadas en el mismo sentido podemos crear un espacio vacio utilizando una regla de llenado par impar fill-rule = evenodd.
See the Pen ceradura*** by Gabi (@enxaneta) on CodePen.
La propiedad fill-rule es heredada así que puede ser declarada para todo un grupo de trazados o puede ser declarada para cada trazado en parte.