使用 SVG 剪辑（或遮盖）DIV

Posted 2023-02-25

【中文标题】使用 SVG 剪辑（或遮盖）DIV

【英文标题】：Using SVG to clip (or mask) a DIV

【发布时间】：2012-04-23 19:00:36

【问题描述】：

我在谷歌上搜索了很多，我刚刚放弃了，所以我会求助于那里的专家，看看是否有人可以帮助我完成我的任务。

我已通过 illustrator 将徽标转换为 .SVG。

我的目标是使用该徽标来剪辑（或根据需要遮盖）整个 div，以便只显示其中的一小部分并且您可以看到背景。

我决定采用 .SVG 方式，因为我想将这个网站创建为完全可扩展的体验，因此 .png 无法从全高清分辨率到 1024x768 准确地工作。

所以首先我想知道如何剪辑一个 Div，同时如何“反向剪辑”，这样不仅可以显示 div 的那一部分，它还可以显示除它之外的所有内容。

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

提前谢谢你。

【问题讨论】：

澄清您要做什么...您想覆盖整个 div（带有正方形）并且只允许一个与您的徽标形状相同的孔？这是否意味着徽标是一个简单的路径？

【参考方案1】：

如果我对您的理解正确（但我不确定），您希望显示“背景中所有符合您徽标形状的内容”，对吗？但是，如果“反转”您的徽标，使其自身透明并赋予背景中性色，例如黑色或白色或其他颜色，那又如何呢？然后你可以将两个 div 放在一起，顶部是你的 Logo。

我创建了一个小提琴来向您展示我的意思： http://jsfiddle.net/ds82/R4rBH/2/

Der circle 是标志，它在蓝线内外都是透明的，它是一个 svg。希望这是你想要的。

【讨论】：

还没有看到你的答案。它绝对有效。必须彻底考虑这一点，看看是否值得使用它而不是.png。你怎么看？

【参考方案2】：

我认为你无法做到这一点。我曾经看到一个插件和一个生成器like this，虽然我认为这可能不是你最好的选择。

我会在 svg 中加入您想要剪辑的任何文本，我确信这比找到一种让您的 html 与 svg 正确交互的方法更容易。

【讨论】：

我不认为他对包装感兴趣，他可能只是想在视觉上剪辑 div

【参考方案3】：

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

【参考方案4】：

目前你想做的基本上只有in Firefox。方法是在SVG中定义正确的<mask>元素，然后通过CSS应用：

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

（或者，如果您嵌入了 SVG：）

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