1

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

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

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

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

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

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

先感谢您。

4

4 回答 4

0

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

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

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

于 2012-05-07T12:45:24.463 回答
0

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

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

于 2012-04-23T19:57:38.207 回答
0

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

于 2012-05-16T15:44:03.040 回答
0

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

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

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

#content {
  mask: url(#logo-mask);
}
于 2012-05-16T15:55:06.237 回答