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

【问题标题】：how does fill-rule="evenodd" work on a star SVGfill-rule="evenodd" 如何在星形 SVG 上工作
【发布时间】：2018-02-11 13:23:07
【问题描述】：

当我试图理解 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"的时候，星星中间没有填满。有人可以解释一下吗？

【问题讨论】：

你的评论现在有意义了！
为填充规则链接规范：svgwg.org/svg2-draft/painting.html#FillRuleProperty

标签： svg

【解决方案1】：

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

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

【讨论】：