使用SVG来剪辑（或屏蔽）DIV [英] Using SVG to clip (or mask) a DIV

问题描述

我已经google了很多，我刚刚放弃，所以我会转向专家，看看有没有人可以帮助我在我的追求。

I've googled a lot and I've just given up, so I'll turn to the experts out there to see if someone can help me in my quest.

我有一个徽标通过插画家​​转换为.SVG。

I've got a logo converted to .SVG through illustrator.

我的目标是使用该标志剪辑（或者如果你喜欢掩盖）整个div，以便只有一小部分它显示通过，你可以看到背景。

My objective is to use that logo to clip (or mask if you prefer) an entire div so that just a small part of it shows through and you can see the background.

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

I decided to go the .SVG way since I want to create this website as a full scalable experience, and thus a .png would not work accurately from full HD resolutions to 1024x768.

所以首先我想知道如何剪辑一个div，同时如何反剪辑，这样，而不是只显示部分

So firstly I would like to know how to clip a Div and at the same time how to "inverse clip" so that instead of just showing that part of the div it would show everything but it.

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

I'll be eagerly awaiting your answers as I really need them...

提前谢谢。

推荐答案

如果我正确地理解了你的意思（我不确定），你想显示符合你的标志的形状，是正确的吗？如果，虽然，颠倒你的标志，使自己透明，给背景一个中性色，如黑色或白色或东西。

If I understood you correctly (and I'm not sure about that), you want to show 'everything in the background that fits the shape of your logo', is that correct? If though, what about 'inverting' your logo, making itself transparent and give the background a neutral color like black or white or something. Then you could put two divs upon each other, with the top being your Logo.

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

I created a fiddle to show you what I mean: http://jsfiddle.net/ds82/R4rBH/2/

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

Der circle is the logo and it's transparent inside and outside the blue line and it's a svg. Hope that is what you want.

这篇关于使用SVG来剪辑（或屏蔽）DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！