在svg中填充一个路径的时候,有一个填充规则属性:fill-rule,这个属性有两个选项,一个是nonzero(默认),一个是evenodd,关于这两个值的解释,官方文档讲解的十分抽象,很多解释文档也只是跟风,把这两个值讲的神乎其神的,以至于我好长时间都搞不懂这两个到底是干什么的。

最近又再次看了看这两个属性,似乎找到了一种比较好理解的方式去理解这两个概念,今天就一起来看看。

思路分析

首先我们要知道的是fill-rule到底是为了解决什么问题,才能很好的理解这两个选项。

background Layer 1 A B C D E F G H I S 路径:A-B-C-D-E-F-G-H-I 重叠区域为S

我们看上图,图中有一个路径A-B-C-D-E-F-G-H-I,当我们用fill填充它的时候,我们会发现其中有一个重叠的区域S,那么这个重叠的区域到底填不填充呢?这,就是fill-rule所干的事。

nonzero表示当内部内部区域形成的方向和外部区域形成的方向相同的话,填充内部区域(下图左边):

我们注意看上图右边那个,那个表示内部区域形成方向和外部区域形成方向不同,不填充。其实这个是默认的,和fill-rule的选项无关的,fill-rule只管内部方向和外部方向相同的时候。

知道了nonzero,那么evenodd肯定也知道了,它表示当内部内部区域形成的方向和外部区域形成的方向相同的话,不填充内部区域(下图左边)。

详细分析

看了上面的解释,是不是还是一脸懵?哈哈,没事,现在仔细分析一下。

其实上面主要的疑问就是什么叫做区域的形成方向?

background Layer 1 A B C D E F G H I S 重叠区域S外部为A-B-C-D-A,形成方向为顺时针 重叠区域S的形成方向为逆时针 沿着A-B-C-D-E-F-G-H-I的方向走,我们会发现: 所以重叠区域S不显示,这个和fill-rule的设置无关,这是默认的

我们拿之前的例子来看,因为我们的路径A-B-C-D-E-F-G-H-I是有一个方向的,我们沿着这个方向去观察重叠区域S和重叠区域的外部区域,我们发现重叠区域外部区域为顺时针,重叠区域S为逆时针,根据我们刚才讲的,当内外方向不同的时候,默认就是不填充内部的,这个和fill-rule的设置无关,因为fill-rule只是控制当内外方向相同的时候,内部是否填充。

上面是验证的demo,大家可以自己去看看,顺便可以设置不同的fill-rule,最终可以发现,这个是和fill-rule无关的。

现在我们来看看最经典的五角星问题:

background Layer 1 S

相同的,这里有一个重叠区域S,不过如何才能知道是重叠区域呢?其实很简单,就是重叠区域的外面还有东西,而它们都还在整个形状之内。

我们可以发现五角星的重叠区域S的形成方向和外部是一样的,这种情况下,fill-rule就起作用了,如果是nonzero,区域S是显示的,如果是evenodd,区域S则不显示。

现在我们来分析一个比较复杂的:

background Layer 1 A B C D E F G H I J K 路径:A-B-C-D-E-F-G-H-I-J-K-A

首先我们要找出内部的重叠区域,然后看看它们和自己的外部方向是否相同:

background Layer 1 A B C D E F G H I J K S1 S2 S3 重叠区域S1,内外相反,S1一定不填充 重叠区域S2,内外相同,根据fill-rule填充 重叠区域S3,内外相同,根据fill-rule填充

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字