svg内外部填充问题

1、问题：拿到一个线性svg，想在这个基础上弄一个如下图所示的深色版本，但是发现里面的弧形小三角会被填充，通过先后顺序调整层级表面后表面看起来是正常的，但实际还是会被填充

想要结果

出现的结果

 

2、原因：svg绘制的图会根据fill-rule规则不同而展示不同的结果：下面有一个例子

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
         style="stroke: #000000;
         fill: #6666ff;"></path>

<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
         style="stroke: #000000;
         fill: #6666ff;"></path>
</svg>

输入上面的代码会看到其中较大的菱形包含较小的菱形。在左侧路径中，内部菱形是从左向右（顺时针）绘制的。在右边的路径中，内部菱形从右到左（逆时针）绘制

 

 同样是svg画的菱形，为啥你这么优秀？这里跟区分是否内外部的fill-rule属性有关

在svg里fill-rule默认的属性是nonzero

nonzero的规则是：这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

3、解决：要处理上面的问题，就要设置fill-rule属性为evenodd

evenodd的规则是：这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" ></path>

<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" ></path>
</svg>

撒花，完美解决！