如何填写规则="；偶数；在星型SVG上工作_Svg

如何填写规则="；偶数；在星型SVG上工作

svg

如何填写规则="；偶数；在星型SVG上工作,svg,Svg,当我试图理解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="#F9F38

当我试图理解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”

该值通过以下方式确定形状中点的“内部性”
从该点向任意方向无限远绘制光线，并
计算光线从给定形状开始的路径分段数
十字架。如果该数字为奇数，则该点位于内部；即使是，结果也是一样的
重点在外面
但我仍然不明白为什么当我应用填充规则=“evenodd”
时，星星的中间没有填充。有人能解释一下吗
 这就是机制的工作原理。在中心选择一个点，在任何方向上画无限长的线-它们总是穿过偶数个路径段-这意味着它们在“外部”，并且它们的区域不会被填充
在填充的三角形中拾取一个点-如果在任何方向上绘制无限长的直线-它们总是与奇数个路径段相交，因此，它们位于“内部”，并且其区域应填充
您的评论现在有意义了！链接填充规范规则：