html - 使用 SVG 剪辑(或屏蔽)DIV

标签 html css svg mask clip

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

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

我的目标是使用该 Logo 来剪辑(如果您愿意,也可以遮住)整个 div,以便只显示其中的一小部分,您可以看到背景。

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

所以首先我想知道如何裁剪一个 Div,同时如何“反向裁剪”以便不只显示 div 的那部分,而是显示除它以外的所有内容。

我会热切地等待您的答复,因为我真的需要它们...

提前谢谢你。

最佳答案

如果我的理解正确(但我不确定),您想要显示“背景中符合 Logo 形状的所有内容”,对吗?但是,如果“反转”您的 Logo ,使其本身透明并为背景提供中性颜色(如黑色或白色或其他颜色)怎么样。然后你可以把两个 div 放在一起,顶部是你的标志。

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

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

关于html - 使用 SVG 剪辑(或屏蔽)DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10286576/

相关文章:

objective-c - 改变 CALayer 的填充颜色

jquery - 音频标签、jQuery 和 currentTime 的问题

html - 如何从旧的 flexbox 过渡到新的?

javascript - 创建等高线图

javascript - 获取矩形以使用 Raphael 和 Handdrawn.js 填充 svg

html - div 内的表格将 div 水平拉伸(stretch)超过 100%

html - 在 IE7/8 中的输入元素上填充顶部?

html - Bootstrap 元素被彼此吃掉

html - 允许将任意外部样式表嵌入到我的网页中是否安全?

javascript - 如何在网页上启用水平滚动