0

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

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

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

我认为我的 SVG 还没有准备好成为一条路径，就好像我将它导出一样，它显示为空白，如果我在路径上放置一个笔划，除了笔划是透明的，或者它没有以任何透明度出现一点也不。

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

4

1 回答 1

1

在#mask那个 CSS 规则中，指的是 SVG 中的这个元素：

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

您可以通过阅读 SVG 规范或网络上提供的众多教程之一来了解蒙版的工作原理。

于 2017-04-23T02:44:17.433 回答