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

Question

当我试图fill-rule在SVG中理解时,我看到了以下的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",明星的中间没有填满.有人可以解释一下吗？

Answer 1

这就是机制的工作原理.在中心选择一个点,在任何方向上绘制无限线 - 它们总是穿过偶数个路径段 - 这意味着它们"在外面"并且它们的区域不会被填满.

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