如何填写规则=“EVENODD”星空SVG工作

Question

我看到当我试图了解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只有一条路径。
• SVG有相交点。
• 如果我改变fill-rule =“nonzero”整个SVG都会得到填充。
• 目前与填充规则=“偶数”应用SVG的中心区域不填补。

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

我并通过 在任何方向上绘制从该点的射线为无穷大并且 计数路径的数量读取fill-rule="evenodd"

该值确定的形状的点的“内部性”的规范来自光线穿过的给定形状的分段。如果这个数字是奇数，那么这个点就在里面;如果连， 点在外面。

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

Answer 1

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

在实心三角形中选取一个点 - 如果您在任何方向上将线条绘制到无穷大时 - 它们总是穿过奇数个路径段，因此它们位于“内部”并且其面积应该填充。