html - 具有透明度的 SVG

Question

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

看起来它与这行代码有关，但我肯定误解了什么。

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 了解掩码的工作原理或网络上提供的众多教程之一。