Understand SVG graphics filling rules

This article is translated from the SVG specification on the w3.org website and serves as a memo for beginners of SVG.

Original Website:
SVG fill-Rule property in SVG 1.1 (second edition)

The SVG graphics filling rule is passedFill-ruleAttribute.

'Fill-rule'

Valid values:	Nonzero | evenodd | Inherit
Default Value:	Nonzero
Applicable:	Shape elements and Text Content Element
Inheritance:	Yes
Proportion:	None
Media:	Visible
Animation available:	Yes

'Fill-rule'
Attribute is used to specify the algorithm used to determine whether an area on the canvas belongs to the image "internal" (the internal area will be filled ). For a simple non-crossover path, which area is "internal" is intuitively cleared. However, for a complex path, such as self-intersection or a sub-path surrounding another sub-path, the "internal" Understanding is not that clear.

'Fill-rule'
Attribute provides two options to specify how to determine the image's "internal ":

Nonzero

It is literally "non-zero ". According to this rule, it is necessary to determine whether a point is in the graph, from which a ray is taken in any direction, and then detect the intersection between the ray and the graph path. Counting starts from 0. If the path passes through the ray from left to right, the count is increased by 1. If the path passes through the ray from right to left, the count is reduced by 1. After the counting result is obtained, if the result is 0, the vertex is considered to be external to the image; otherwise, the result is considered to be internal. Demonstrate nonzero rules:

Click to view the sample SVG file (only applicable to browsers that support SVG)

Evenodd

The literal meaning is "parity ". According to this rule, you need to determine whether a point is in the graph, from which a ray is taken in any direction, and then check the number of intersections between the ray and the graph path. If the result is an odd number, the vertex is considered to be an internal vertex. If the result is an even number, the vertex is considered to be an external vertex. Demonstrated Evenodd
Rules:

Click to view the sample SVG file (only applicable to browsers that support SVG)

(Note: The above explanation does not indicate what to do when the path fragment is coincident or tangent to the ray, because any direction of the ray can be, you only need to simply select another ray without such special circumstances .)

This article is translated from the SVG specification on the w3.org website and serves as a memo for beginners of SVG.

Original Website:
SVG fill-Rule property in SVG 1.1 (second edition)

The SVG graphics filling rule is passedFill-ruleAttribute.

'Fill-rule'

Valid values:	Nonzero | evenodd | Inherit
Default Value:	Nonzero
Applicable:	Shape elements and Text Content Element
Inheritance:	Yes
Proportion:	None
Media:	Visible
Animation available:	Yes

'Fill-rule'
Attribute is used to specify the algorithm used to determine whether an area on the canvas belongs to the image "internal" (the internal area will be filled ). For a simple non-crossover path, which area is "internal" is intuitively cleared. However, for a complex path, such as self-intersection or a sub-path surrounding another sub-path, the "internal" Understanding is not that clear.

'Fill-rule'
Attribute provides two options to specify how to determine the image's "internal ":

Nonzero

It is literally "non-zero ". According to this rule, it is necessary to determine whether a point is in the graph, from which a ray is taken in any direction, and then detect the intersection between the ray and the graph path. Counting starts from 0. If the path passes through the ray from left to right, the count is increased by 1. If the path passes through the ray from right to left, the count is reduced by 1. After the counting result is obtained, if the result is 0, the vertex is considered to be external to the image; otherwise, the result is considered to be internal. Demonstrate nonzero rules:

Click to view the sample SVG file (only applicable to browsers that support SVG)

Evenodd

The literal meaning is "parity ". According to this rule, you need to determine whether a point is in the graph, from which a ray is taken in any direction, and then check the number of intersections between the ray and the graph path. If the result is an odd number, the vertex is considered to be an internal vertex. If the result is an even number, the vertex is considered to be an external vertex. Demonstrated Evenodd
Rules:

Click to view the sample SVG file (only applicable to browsers that support SVG)

(Note: The above explanation does not indicate what to do when the path fragment is coincident or tangent to the ray, because any direction of the ray can be, you only need to simply select another ray without such special circumstances .)