围绕 svg 形状创建一个初始蒙版

Question

在一个艺术项目中，我在整个 canvas 上绘制 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" />

围绕 svg 形状创建一个初始蒙版

Creating an outset mask around svg shape

svg

mask

svg-filters