Raphael.js：组合自定义图形填充异常问题求助

这是SVG默认的填充规则在搞鬼！我之前做自定义图标时也踩过一模一样的坑😅

核心原因：非零环绕规则（Non-zero Winding Rule） #

SVG默认使用nonzero作为填充规则，它会根据路径的绘制方向（顺时针/逆时针）判断哪些区域属于“内部”：

• 当你绘制外部图形和内部图形时，如果两者的路径方向相同（比如都是顺时针），非零规则会把两个图形的区域都判定为需要填充的内部区域，所以内外都会被填上颜色。
• 而描边不受这个规则影响——它只是沿着路径线条渲染，所以轮廓显示完全正常。

两种快速解决方法 #

方法1：修改内部路径的绘制方向

把内部图形的路径方向改成和外部相反（比如外部顺时针，内部就改成逆时针），这样非零规则就能识别出中间的空心区域。
比如原来的内部顺时针路径：M 100 100 L 200 100 L 200 200 L 100 200 Z，改成逆时针：M 100 100 L 100 200 L 200 200 L 200 100 Z。

方法2：直接设置fill-rule="evenodd"

更省心的方式是给SVG元素或者路径元素加上fill-rule="evenodd"属性。这个规则逻辑直白：一个区域被路径穿过奇数次就填充，偶数次就不填充——不管路径方向如何，嵌套图形都会自动形成空心效果。
示例代码：

<svg width="300" height="300">
  <path d="M 50 50 L 250 50 L 250 250 L 50 250 Z M 100 100 L 200 100 L 200 200 L 100 200 Z" 
        fill="blue" 
        stroke="black" 
        fill-rule="evenodd" />
</svg>

这样设置后，你就能得到只有外部和内部之间的区域被填充的效果啦！

内容的提问来源于stack exchange，提问作者RobertyBob