在svg形状周围创建初始蒙版

Question

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

在这些情况下，我希望结果看起来像这样：

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

希望您能帮助我。 谢谢您的时间：）

Answer 1

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

svg{background:#ccc; width:300px;}

<svg viewBox = "0 0 100 100">
  <defs>
    <path id="test" d="M10,75Q33,75 50,50 T90,25" fill="none" />
  </defs>
    <use xlink:href="#test" style="stroke:#fff;stroke-width:10; stroke-linecap: round" />
    <use xlink:href="#test" style="stroke:#000;stroke-width:3; stroke-linecap: round" />