how does fill-rule="evenodd" work on a star SVG : <p>I saw the following svg shape when i was trying to understand <code>fill-rule</code> in SVG </p>

<pre><code>&lt;div class="contain-demo"&gt;
  &lt;svg width="250px" height="250px" viewBox="0 0 250 250"&gt;
    &lt;desc&gt;Yellow star with intersecting paths to demonstrate evenodd value.&lt;/desc&gt;
    &lt;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 " /&gt;
  &lt;/svg&gt;
&lt;/div&gt;
</code></pre>

<p>Please note the following:</p>

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

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

<p>I did read the spec for <code>fill-rule="evenodd"</code> </p>

<blockquote>
  <p>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.</p>
</blockquote>

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