具有透明度的 SVG

Question

我的目标是创造一种类似于found on this codepen 的效果。在背景视频上有一个透明的 SVG。到目前为止，我有一个从 Photoshop 导出的带有路径形状的 AI 文档。理想情况下，我希望路径内部是透明的，但其余部分是白色的，就像示例中一样。怎样才能达到这样的效果？

看起来它与这行代码有关，但我肯定误解了一些东西。

svg > rect {
    fill: white;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

我认为我的 SVG 还没有准备好作为一个路径，就好像我将它导出一样，它显示为空白，如果我在路径上放置一个笔划，要么除了笔划是透明的，要么它没有出现完全透明。

通常，我作为 Web 开发人员的工作流程从来没有让我深入使用 SVG 进行这项工作，所以我有点卡在这个上。

Answer 1

该 CSS 规则中的 #mask 指的是 SVG 中的此元素：

<mask id="mask" x="0" y="0" width="1920" height="1080" >
...
</mask>

您可以通过reading the SVG specification 或网络上提供的众多教程之一了解面具的工作原理。