title: Reverse effect of evenodd in Svg
body: <p>I started learning SVG. Using polygons I have created a Star. While further reading I found a fill-rule property which can take two attributes first one is nonzero which will fill colour in whole the shape and another one is evenodd which will fill colour in odd points and even points will remain unfilled. When I used evenodd it filled the outer part of the star and left the centre blank.
  How can I fill the centre or even points only of the star?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body&gt;
      
      &lt;svg height="210" width="500"&gt;
        &lt;polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/&gt;
        Sorry, your browser does not support inline SVG.
      &lt;/svg&gt;
      
      &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This will generate a star ditto to the 1st image<a href="https://i.stack.imgur.com/J2n5A.png" rel="nofollow noreferrer">Side-Filled star</a></p>
  
  <p>and I want only center to be filled check 2ndimage.<a href="https://i.stack.imgur.com/HZx8B.png" rel="nofollow noreferrer">Cneter fill star only</a></p>