SVG.js使用clipWith裁剪内圆生成蓝色圆环失败，求助

我有一个白色内圆和一个蓝色外圆，想要通过裁剪掉白色内圆来得到蓝色圆环。（我知道可以用单个圆形加描边实现，但后续会使用更复杂图形，因此先尝试完成该简单任务。）

我尝试了以下代码的多种变体：

const container = SVG().addTo('body').size(500, 500)

const bg = container.rect(500,500).fill('green')

// outer circle
const outerCircle = container.circle(100).fill('blue');

// inner circle
const innerCircle = container.circle(80).fill('white').center(outerCircle.cx(), outerCircle.cy());

// Clip the outer circle with the inner circle
outerCircle.clipWith(innerCircle);

但结果是外圆被移除，效果如下：外圆被移除的效果。请问我哪里操作错了？

问题原因与解决方案 #

问题出在clipWith的逻辑上——SVG的裁剪蒙版是只显示裁剪图形覆盖的区域，你用白色内圆去裁剪蓝色外圆，相当于只保留内圆覆盖的部分，但内圆本身是白色填充，外圆是蓝色，最终叠加后看起来外圆被完全移除了。

要实现“挖掉内圆”的效果，需要用反向逻辑的蒙版，或者直接进行图形差集运算，以下是两种适配复杂图形的可行方案：

方案1：使用蒙版（mask） #

蒙版的规则是白色区域显示原图形，黑色区域隐藏原图形。我们先创建一个包含白色外圆+黑色内圆的蒙版，再应用到蓝色外圆上：

const container = SVG().addTo('body').size(500, 500)

const bg = container.rect(500,500).fill('green')

// 创建蒙版
const mask = container.mask()
mask.circle(100).fill('white') // 白色区域保留外圆部分
mask.circle(80).fill('black').center(50, 50) // 黑色区域挖掉内圆部分

// 给外圆应用蒙版
const outerCircle = container.circle(100).fill('blue').center(50, 50)
outerCircle.maskWith(mask)

方案2：使用图形差集运算 #

svg.js支持路径布尔运算，直接创建外圆减去内圆的复合图形：

const container = SVG().addTo('body').size(500, 500)

const bg = container.rect(500,500).fill('green')

// 创建外圆，再与内圆做差集
const ring = container.circle(100).fill('blue')
ring.difference(container.circle(80).center(ring.cx(), ring.cy()))

这两种方法都能实现蓝色圆环效果，且可以直接扩展到后续的复杂图形操作。

内容的提问来源于stack exchange，提问作者J-C