how does fill-rule="evenodd" work on a star SVG

Question

I saw the following svg shape when i was trying to understand fill-rule in SVG

<div class="contain-demo">
  <svg width="250px" height="250px" viewBox="0 0 250 250">
    <desc>Yellow star with intersecting paths to demonstrate evenodd value.</desc>
    <polygon fill="#F9F38C" fill-rule="evenodd" stroke="#E5D50C" stroke-width="5" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />
  </svg>
</div>

Please note the following:

• The SVG has just one path.
• The SVG has intersecting points.
• if i change fill-rule="nonzero" the entire SVG get the fill.
• Currently with fill-rule="evenodd" applied the SVG's central area does't get the fill.

Why is it that with fill-rule="evenodd" the central portion of the star SVG is not filled ?

I did read the spec for fill-rule="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.

But i still don't understand why when i apply fill-rule="evenodd", the middle of the star is not filled. Can somebody please explain this ?

Answer 1

This is how the mechanism works. Pick a point in the center, draw lines to infinity in any direction - they always cross an even number of path segments -which means that they are "outside" and their areas don't get filled.

Pick a point in the filled triangles - if you draw lines to infinity in any direction - they always cross an odd number of path segments and thus, they are "inside" and their area should be filled.