SVG能否实现类似CSS text-decoration-skip-ink的描边交叉避让效果？

以下三种可落地的实现方式，效果和CSS的text-decoration-skip-ink功能一致，均优于你当前使用的纯色投影模拟方案：

1. 蒙版实现法（兼容性最优，适配任意背景） #

原理是给上层图形生成一个稍大于自身描边范围的蒙版，自动遮挡下层路径的相交区域，无需固定背景色，透明场景也可使用。
示例代码：

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 定义蒙版：上层圆形的膨胀区域用来遮挡下层线段 -->
  <mask id="strokeSkipMask">
    <rect width="100%" height="100%" fill="white"/>
    <!-- 膨胀半径设为描边宽度的1/2，刚好盖住下层交叉的描边 -->
    <circle cx="100" cy="80" r="40" stroke="black" stroke-width="12" fill="none"/>
  </mask>
  <!-- 下层路径，应用蒙版 -->
  <path d="M40 120 L160 120" stroke="#000" stroke-width="8" mask="url(#strokeSkipMask)"/>
  <!-- 上层圆形 -->
  <circle cx="100" cy="80" r="40" stroke="#000" stroke-width="8" fill="none"/>
</svg>

2. 双层路径模拟法（实现最简单，适合静态固定场景） #

原理是将上层图形拆为两层：下层为宽度等于2倍原描边、颜色和背景一致的描边，上层为原样式描边，自带交叉遮挡效果。

• 优点：代码量极小，无需理解蒙版逻辑
• 缺点：必须明确背景色，透明背景场景不可用

3. 滤镜优化方案（适配动态生成场景） #

你目前使用的纯色投影方案可以优化为使用SVG的feMorphology滤镜做描边膨胀，再通过feComposite做内容裁剪，无需固定背景色，适用性比纯色投影高很多。

效果参考 #

当前默认相交效果：

优化后避让效果：

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