围绕svg形状创建起始遮罩

在一个艺术项目中，我在画布上绘制svg形状，以便它们有时可以重叠：

在这些情况下，我希望结果如下所示：

我想我必须围绕前景形状创建某种形状，但我不知道如何动态地做到这一点。有没有办法做到这一点？从其他一些问题中我得到了提示，可能有使用过滤器的可能性。如果没有其他的方法，我很乐意这样做，但我也听说这些过滤器是资源密集型的，会有什么问题，因为我在这里做了很多动画

希望你能帮助我。

---

感谢您的时间：）

如果这些笔划有笔划但没有填充，您可以执行以下操作：使用不同笔划宽度的每条路径两次

svg{背景：#ccc；宽度：300px；}

---

哦，谢谢：）我真不敢相信我自己没有这个想法^^^这也适用于轮廓：背景为白色笔划，前景为黑色填充。（SVG 2的实现还不够广泛，还不能只使用一种形状。）