HTML <div> 上的自定义剪切路径答案

【问题标题】：Custom clipping path over HTML <div>HTML <div> 上的自定义剪切路径
【发布时间】：2012-06-20 17:27:15
【问题描述】：

在尝试使用 SVG 失败后，我希望使用另一种技术将 clip-path（自定义多边形，如箭头）应用到 <div>，女巫还有其他一些 HTML里面的元素

<div class="firstbox">
    <h2>Title</h2>
    <a href="#">This is a link</a>
    <img src="#">
</div>

问题在于<div> 之外的背景，它应该是可见的——没有png 来制作“假面具”。 HTML 内容应该在没有 JS 的情况下可见 - 所以没有 <canvas> AFAIK - 并且能够被搜索机器人索引。

这是要完成的任务：http://min.us/mboMRhEQSq

【问题讨论】：

【解决方案1】：

好吧，经过一番研究：

clip-path 是 Mozilla 想要并且可以提供帮助的东西，但只有 Firefox 支持它。
mask CSS 属性仅受 Chrome 支持。
用内部的 HTML 编写 SVG 并剪切内容，可以弥补这一任务，但 IE9 不会在 foreignObject 中呈现 HTML。
使用 SVG 仅剪切背景图像是一种解决方案，但是使用 jQuery SVG plugin 在块内制作动画（以将它们保留在剪辑中）是一项非常艰巨的任务。 Raphaël JS framework 表示 SVG 不支持内联 SVG。
在内容上使用 PNG 是不行的，<div> 下方的背景必须可见。
在任务中使用<canvas> 是不行的，它不是用来渲染内部的html 代码的。此外，没有像 SVG 这样的事件处理程序来为“悬停”设置动画。

所以，答案很明确：没有办法剪辑（制作）一组 HTML 元素。回到绘图板我猜。

【讨论】：

【解决方案2】：

如果您只有几个短字符串（例如在您的示例中），我建议您只使用纯 svg，并在 svg 内使用掩码。这将适用于所有支持 svg 的浏览器。或者您可以等待所有浏览器实现尚未标准化的 suggestions 之一（建议 1-3）。

这是在 svg 中使用掩码的 example。 svg 1.1 testsuite 中还有更多，查找名为 masking-* 的测试。

【讨论】：

读了你的文章后，我决定再做一次我的第 4 点，它奏效了。制作动画并不难，我只需要选择最接近 SVG 元素的父元素，类似于 SVG->switch->g->elements。