Html 使用SVG剪裁（或屏蔽）DIV

我已经在谷歌上搜索了很多次，现在我已经放弃了，所以我会向那里的专家寻求帮助，看看是否有人能在我的任务中帮助我

我已经通过illustrator将一个徽标转换为.SVG

我的目标是使用该标志来剪辑或遮罩，如果你喜欢一个完整的div，这样只有一小部分显示出来，你可以看到背景

我决定使用.SVG，因为我想创建一个完全可扩展的网站，因此.png无法从全高清分辨率精确到1024x768

所以首先我想知道如何剪辑一个Div，同时如何反转剪辑，这样它就不会只显示Div的那个部分，而是显示除它之外的所有内容

我会急切地等待你的答案，因为我真的需要它们

---

先谢谢你

我认为你做不到这一点。我曾经看到一个插件和一个生成器，尽管我认为这可能不是你最好的选择

---

我会将您想要剪辑的任何文本合并到svg中，我相信这比找到html与svg正确交互的方法要容易得多。

如果我正确理解您的意思，但我不确定，您希望显示“背景中适合您徽标形状的所有内容”，对吗？如果是这样的话，那么把你的标志“倒置”，使其本身透明，并给背景一个中性的颜色，比如黑色或白色或其他什么呢。然后你可以把两个div放在对方身上，上面是你的徽标

我制作了一把小提琴来告诉你我的意思：

---

Der circle是徽标，在蓝线内外都是透明的，是svg。希望这就是你想要的。

好吧，因为我无法通过.svg完成它，所以我最终只使用了一个.png，其中所有内容都是黑色的，我的徽标是透明的。我有点难过，因为我找不到答案…

基本上，你想做的事情现在才起作用。方法是在SVG中定义正确的元素，然后通过CSS应用它：

#content {
  mask: url(remote.svg#logo-mask);
}

或者，如果嵌入了SVG：

#content {
  mask: url(#logo-mask);
}

---

我认为他对包装不感兴趣，他可能只是想直观地剪掉div，以澄清你想做什么……你想用一个正方形覆盖整个div，只允许一个与你的徽标形状相同的孔？这是否意味着徽标是一条简单的路径？我还没有看到你的答案。它确实有效。我们必须仔细考虑一下，看看用它代替.png是否值得。你怎么认为？