如何在星形SVG上使用fill-rule="evenodd"属性？

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="nonzero" ，整个 SVG 将被填充。
• 目前，应用 fill-rule="evenodd" 后，SVG 的中心区域不会被填充。

为什么使用 fill-rule="evenodd" 后，星形 SVG 的中心部分没有被填充？

我已经阅读了 fill-rule="evenodd" 的规范

该值通过从该点到任意方向的无限远处绘制射线，并计算穿过给定形状的路径段数来确定形状中点的“内部状态”。如果此数字为奇数，则该点在内部；如果是偶数，则该点在外部。

但我仍然不明白为什么当我使用 fill-rule="evenodd" 时，星形 SVG 的中间部分没有被填充。可以有人解释一下吗？

- Alexander Solonik

---

你的评论现在有意义了！ - Alexander Solonik

链接填充规则的规范：https://svgwg.org/svg2-draft/painting.html#FillRuleProperty - Matthias

Answer 1

这是机制的工作原理。在中心点选取一个点，向任意方向画线，它们总是会经过偶数个路径段——这意味着它们是“外部”，其区域不被填充。

在填充的三角形中选取一个点——如果你向任何方向画线，它们总是会穿过奇数条路径段，因此它们是“内部”，它们的区域应该被填充。

- Michael Mullany