fill-rule="evenodd" 是怎么做的?在星形 SVG 上工作 [英] how does fill-rule="evenodd" work on a star SVG

问题描述

当我试图理解 SVG 中的 fill-rule 时，我看到了以下 svg 形状

<svg width="250px" height="250px" viewBox="0 0 250 250"><desc>带有交叉路径的黄色星形以证明偶数值.</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.798.208 242.216,98.208"/></svg>

请注意以下事项:

• SVG 只有一条路径.
• SVG 有交点.
• 如果我更改 fill-rule="nonzero" 整个 SVG 都会得到填充.
• 当前应用 fill-rule="evenodd" 后，SVG 的中心区域无法填充.

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

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

的规范<块引用>

该值通过以下方式确定形状中点的内部性"从该点向任意方向绘制一条无限远的射线，并且计算射线从给定形状的路径段数十字架.如果这个数是奇数，则点在里面；如果甚至，点在外面.

但我还是不明白为什么当我应用fill-rule="evenodd"时，星星的中间没有填充.有人可以解释一下吗?

解决方案

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

在实心三角形中选择一个点——如果你在任何方向上画一条无限远的线——它们总是穿过奇数个路径段，因此，它们在内部"，它们的区域应该被填充.

I saw the following svg shape when i was trying to understand fill-rule in 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>

Please note the following:

• The SVG has just one path.
• The SVG has intersecting points.
• if i change fill-rule="nonzero" the entire SVG get the fill.
• Currently with fill-rule="evenodd" applied the SVG's central area does't get the fill.

Why is it that with fill-rule="evenodd" the central portion of the star SVG is not filled ?

I did read the spec for 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.

But i still don't understand why when i apply fill-rule="evenodd", the middle of the star is not filled. Can somebody please explain this ?

解决方案

This is how the mechanism works. Pick a point in the center, draw lines to infinity in any direction - they always cross an even number of path segments -which means that they are "outside" and their areas don't get filled.

Pick a point in the filled triangles - if you draw lines to infinity in any direction - they always cross an odd number of path segments and thus, they are "inside" and their area should be filled.

这篇关于fill-rule="evenodd" 是怎么做的?在星形 SVG 上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！