围绕 svg 形状创建初始蒙版

【问题标题】：Creating an outset mask around svg shape围绕 svg 形状创建初始蒙版
【发布时间】：2019-05-13 19:17:36
【问题描述】：

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

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

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

希望你能帮助我。谢谢你的时间:)

【问题讨论】：

标签： svg mask svg-filters

【解决方案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 2 paint-order 的实施还不够广泛，只能使用一种形状。）