How fill-rule = "evenodd" works on stellar SVG

I saw the following svg form when I tried to understand fill-rulein 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:

  • SVG has only one path.
  • SVG has intersecting points.
  • If I change fill-rule = "nonzero" , the whole SVG gets filled.
  • Currently, using fill-rule = "evenodd", the central SVG area does not receive padding.

Why is the fill-rule="evenodd"central part of the star SVG not filled?

I read the spec for fill-rule="evenodd"

"" , . , ; , .

, , fill-rule="evenodd", . - ?

+4
1

. , - , , "", .

- - , , "", .

fill-rule even odd

+7

Source: https://habr.com/ru/post/1684960/


All Articles