SVG路径无法创建镂空效果的问题咨询

嘿，我来帮你捋捋这个问题！你遇到的情况其实挺常见的——SVG里要做出镂空效果，核心在于路径的绘制方向或者**填充规则（fill-rule）**的设置，咱们一步步来解决。

先看你给出的路径代码：

M70,20 L80,35 75,45 90,55 95,50 105,60 85,80 90,90 80,100 50,70 45,70 30,55 50,30 55,35 z 
M65,50 L80,70 75,75 55,60 z

现在这两个路径都是顺时针绘制的（顺着点的顺序走就能看出来，外层绕形状顺时针转，内层也是），而SVG默认的填充规则是nonzero（非零环绕规则），这种规则下，同方向的路径会叠加填充，自然出不了镂空效果。

给你两种简单的解决办法：

• 方法一：反转内层路径的绘制方向
  把内层路径的点顺序倒过来，改成逆时针绘制，比如：

  M65,50 L55,60 75,75 80,70 z
  

  这样内外路径方向相反，用默认的nonzero规则就能自动形成镂空了。

• 方法二：给SVG元素添加fill-rule="evenodd"属性
  不用改路径顺序，直接在包含这些路径的<path>或者<svg>标签里加上这个属性就行，比如：

  <path d="M70,20 L80,35 75,45 90,55 95,50 105,60 85,80 90,90 80,100 50,70 45,70 30,55 50,30 55,35 z M65,50 L80,70 75,75 55,60 z" fill-rule="evenodd" />
  

  奇偶规则会根据区域被路径环绕的次数判断填充：奇数次填充，偶数次不填充，内层区域会被判定为偶数次，也就实现镂空了。

你试试这两种方法，应该就能得到你想要的效果啦！

备注：内容来源于stack exchange，提问作者lukehawk