0

在对 SVG 进行不成功的实验后，我希望使用另一种技术将剪辑路径（自定义多边形，如箭头）应用于 a <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

4

2 回答 2

0

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

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

于 2012-06-21T11:56:31.667 回答
0

好吧，经过一番研究：

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

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

于 2012-06-20T19:35:41.203 回答