fill-rule =“evenodd”如何在一个明星SVG上工作

Question

当我试图理解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 =“非零”，整个SVG都会获得填充。
• 目前应用了 fill-rule =“evenodd”，SVG的中心区域无法填充。

为什么fill-rule="evenodd"明星SVG的中心部分没有填充？

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

的规范

  

此值确定形状中点的“内部度”   在任何方向上绘制从该点到无限远的光线   计算来自给定形状的光线的路径段的数量   跨越。如果这个数字是奇数，则该点在内部;如果均匀的话   点在外面。

但是我仍然不明白为什么当我申请fill-rule="evenodd"时，明星的中间部分没有填满。有人可以解释一下吗？

Answer 1

这就是机制的运作方式。在中心选择一个点，在任何方向上绘制线条到无穷大 - 它们总是穿过偶数个路径段 - 这意味着它们“在外面”并且它们的区域不会被填满。

在实心三角形中选取一个点 - 如果你在任何方向上画线到无穷大 - 它们总是穿过奇数个路径段，因此它们是“内部”并且它们的区域应该被填充。