fill-rule="evenodd" 如何在星形 SVG 上工作

当我试图理解时，我看到了以下 svg 形状fill-rule in 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 有交点。
• 如果我改变填充规则=“非零”整个 SVG 都被填充了。
• 目前与填充规则=“偶数”应用 SVG 的中心区域没有得到填充。

为什么会这样fill-rule="evenodd"星形SVG的中心部分没有被填充？

我确实阅读了规范fill-rule="evenodd"

该值通过以下方式确定形状中点的“内部性” 从该点向任意方向绘制一条射线 计算射线从给定形状开始的路径段数 十字架。如果这个数字是奇数，则该点在内部；如果是的话，则 点在外面。

但我还是不明白为什么我申请的时候fill-rule="evenodd"，中间的星号没有填充。有人可以解释一下吗？

这就是该机制的工作原理。在中心选取一个点，在任何方向上绘制无限远的线 - 它们总是穿过偶数个路径段 - 这意味着它们在“外部”并且它们的区域不会被填充。

在填充的三角形中选择一个点 - 如果您在任何方向上绘制无限远的线 - 它们总是穿过奇数个路径段，因此，它们在“内部”并且它们的区域应该被填充。