在星型SVG上,fill-rule =” evenodd”如何工作


how does fill-rule=“evenodd” work on a star SVG

当我尝试理解SVG

中的fill-rule时,看到了以下svg形状

1
2
3
4
  <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>

请注意以下事项:

  • SVG只有一条路径。
  • SVG具有相交点。
  • 如果我更改fill-rule =" nonzero",则整个SVG都会得到填充。
  • 当前,使用fill-rule =" evenodd"时,SVG的中心区域无法填充。

为什么用fill-rule="evenodd"不能填充星SVG的中心部分?

我确实阅读了fill-rule="evenodd"

的规范

This value determines the"insideness" of a point in the shape by
drawing a ray from that point to infinity in any direction and
counting the number of path segments from the given shape that the ray
crosses. If this number is odd, the point is inside; if even, the
point is outside.

但是我仍然不明白为什么当我申请fill-rule="evenodd"时,星星的中央没有被填充。有人可以解释一下吗?


该机制的工作方式。在中心选择一个点,在任何方向上画线到无穷大-它们总是横穿偶数个路径段-这意味着它们在"外面"并且其区域未被填充。

在实心三角形中选取一个点-如果您在任意方向上画线到无穷大,则它们总是越过奇数个路径段,因此它们在"内部",并且应该填充其区域。

fill-rule