当我试图理解SVG中的fill-rule
时,我看到了以下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>
请注意以下内容:
- SVG 只有一条路径。
- SVG 存在交叉点。
- 如果我更改 fill-rule="nonzero" ,整个 SVG 将被填充。
- 目前,应用 fill-rule="evenodd" 后,SVG 的中心区域不会被填充。
为什么使用 fill-rule="evenodd"
后,星形 SVG 的中心部分没有被填充?
我已经阅读了 fill-rule="evenodd"
的规范
该值通过从该点到任意方向的无限远处绘制射线,并计算穿过给定形状的路径段数来确定形状中点的“内部状态”。如果此数字为奇数,则该点在内部;如果是偶数,则该点在外部。
但我仍然不明白为什么当我使用 fill-rule="evenodd"
时,星形 SVG 的中间部分没有被填充。可以有人解释一下吗?