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", . - ?