Custom clipping path over HTML <div>

Custom clipping path over HTML <div>

本文关键字：lt div gt HTML clipping path over Custom      更新时间：2023-09-26
上的自定义剪切路径。

在SVG实验失败后，我希望使用另一种技术将剪辑路径（自定义多边形，如箭头）应用于<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支持它。
  2. mask CSS 属性仅受 Chrome 支持。
  3. 编写包含HTML的SVG并剪辑内容可以弥补这项任务，但IE9不会在foreignObject中呈现HTML。
    4. 使用 SVG
  4. 仅剪切背景图像是一种解决方案，但使用 jQuery SVG 插件在块内制作动画（以将它们保留在剪辑内）是一项非常艰巨的任务。Raphaël JS框架不支持内联SVG。
  5. 在内容上使用PNG是不行的，<div>下面的背景必须是可见的。
  6. 将<canvas>用于任务是不行的，它不是为了在里面渲染html代码而制作的。此外，没有像 SVG 这样的事件处理程序来"悬停"时进行动画处理。

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

如果你只有几个短字符串（就像在你的例子中一样），我建议只使用普通的 svg，并在 svg 中使用掩码。这在今天所有支持 svg 的浏览器中都有效。或者，您可以等待所有浏览器实现尚未标准化的建议之一（建议 1-3）。

下面是在 svg 中使用掩码的示例。在 svg 1.1 测试套件中还有更多内容，请查找名为 masking-* 的测试。

相关文章：