包含开放子路径的SVG路径如何实现无孔洞填充效果？

问题解决思路 #

你遇到的孔洞问题由三个核心原因导致：

1. SVG在计算路径填充时，会自动将所有开放子路径的起点和终点用直线连接，隐式闭合后再参与填充规则计算
2. 同一<path>标签内的所有子路径会统一套用填充规则，嵌套子路径会触发挖洞逻辑
3. 你现有代码里的外层矩形路径存在语法错误：v0,600、h-1200,0属于非法写法，v/h是单参数相对路径命令，多余参数会导致路径绘制结果不符合预期，可先修正为v 600、h -1200。

可落地的解决方法 #

方法1：拆分多子路径为独立标签（最稳妥） #

不要把外层填充矩形和内部描边波浪放在同一个<path>里，拆分后各自的填充规则独立，不会出现挖洞效果，示例代码如下：

path.rect {
  fill: aqua;
  stroke: none;
}
path.wave {
  fill: none;
  stroke: red;
  stroke-width: 5;
}

<svg width="600px" height="200px" viewBox="0 0 2400 600">
  <!-- 左侧矩形 -->
  <path class="rect" d="M0,0 L1200,0 v600 h-1200 Z"/>
  <!-- 左侧波浪 -->
  <path class="wave" d="M200,300 Q400,50 600,300 T1000,300"/>
  <!-- 右侧矩形 -->
  <path class="rect" d="M1200,0 L2400,0 v600 h-1200 Z"/>
  <!-- 右侧波浪 -->
  <path class="wave" d="M2200,300 Q2000,550 1800,300 T1400,300"/>
</svg>

方法2：保留单path结构，调整子路径逻辑 #

如果你必须把多个图形放在同一个<path>的d属性里，可以手动将内部波浪子路径闭合为与外层矩形缠绕方向一致的区域，用nonzero填充规则即可避免挖洞：

• 左侧波浪调整为：M200,300 Q400,50 600,300 T1000,300 L1000,600 L200,600 Z
• 调整后波浪子路径和外层矩形同为顺时针方向，不会触发挖洞逻辑

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