SVG 判断 图形填充区域

SVG的图形填充规则通过fill-rule属性来指定。其值有 nonzero(默认)和evenodd（看参考文章说还有一个inherit属性，但是我在MDN上看只有两种）

fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。

nonzero：

字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径(路径是有方向的，顺时针或逆时针)的交点情况。从0开始计数，路径顺时针（或逆时针）穿过射线则计数加1，逆时针（或顺时针）穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。

比如：

下图1判断A点所在位置，二十四角星线条顺时针绘制，五角星线条逆时针绘制，由A点向右引一条射线，则顺、逆时针方向各有一条穿过该射线，相互抵消则结果为0，即A点在图形外部。

下图2，二十四角星线条和五角星线条都顺时针绘制（同方向），则穿过射线的路径结果统计为2（非0），则A点在图形内部

 

evenodd：

字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

比如，A点引出的射线，与图形路径交点数为2（偶数，不管路径方向），则A点外部

 

参考链接：

参考1