使用SVG夹(或掩模)一个DIV(Using SVG to clip (or mask) a DIV

2019-10-16 14:58发布

我GOOGLE了很多,我只是放弃了,所以我会求助于专家那里,看看是否有人能帮助我在我的追求。

我已经得到了转化,通过插画.SVG一个标志。

我的目标是使用标志夹(或者,如果你喜欢面具)的整个div中,只是其中的一小部分显示了通过,你可以看到背景。

我决定去.SVG方式,因为我要创建这个网站作为一个完整的可扩展的经验,从而为.png不会从全高清分辨率准确工作为1024x768。

所以,首先我想知道如何剪辑一个事业部,并在同一时间如何“反夹”,这样,而不是仅仅显示DIV的那部分它会显示一切,但它。

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

先感谢您。

Answer 1:

如果我理解正确的,你(我不知道这一点),要显示“在适合你的标识形状的背景下一切”,是正确的? 如果不过,何谈“反转”你的标志,实现自身的透明化,让背景中的中性色,如黑色或白色或东西。 然后,你可以把两个div在彼此,顶是你的标志。

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

明镜圈的标志,它是透明的内部和蓝线外,这是一个SVG。 希望这是你想要的。



Answer 2:

我不认为你要能够做到这一点。 我曾经看到一个插件和发电机这样的 ,但我认为这可能不是你最好的选择。

我将纳入你想在SVG,我敢肯定比找到适合您的HTML与SVG正确的交互方式比较容易做剪辑的任何文字。



Answer 3:

好了,因为我无法通过.SVG做最后我只使用一个巴纽这里的一切是黑色的,我的标志是透明的。 一种悲哀,我无法找到答案,但...



Answer 4:

基本上你想要做的工作只是什么在Firefox的时刻。 的方式是定义正确的<mask>元件在SVG,然后通过CSS应用它:

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

(或者,如果你嵌入SVG :)

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


文章来源: Using SVG to clip (or mask) a DIV