Javascript HTML

在SVG实验失败后，我希望使用另一种技术将剪辑路径应用于自定义多边形，如箭头指向具有其他HTML元素的多边形

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

问题是它的背景在外面，它应该是可见的-没有png来制作假面具。HTML内容应该是可见的，不需要JS，所以没有AFAIK，并且可以被搜索机器人索引

---

以下是我们想要完成的任务：

好吧，经过一些研究：

这是Mozilla想要并且可以帮助的，但只有Firefox支持它。 CSS属性仅受Chrome支持。 用HTML编写SVG并剪切内容可以弥补这一任务，但IE9不会在foreignObject中呈现HTML。 使用SVG只剪切背景图像是一种解决方案，但是在块内设置动画以使其保持在剪辑中是一项非常困难的任务。for SVG不支持内联SVG。 在内容上使用PNG是不行的，下面的背景必须是可见的。 用于任务是不可能的，它不是用来呈现内部html代码的。此外，没有类似SVG的事件处理程序可以在悬停时设置动画。

---

因此，答案很清楚：没有办法裁剪一组HTML元素。回到绘图板，我想。

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

---

下面是一个在svg中使用掩码的示例。在中还有一些测试，请查找名为masking-*。

问题还不完全清楚您想要完成什么？如果能看到至少一个你想要达到的效果的例子，那就太好了。基本上，我可以用SVG做些什么，但是AFAIK对于它里面的自定义HTML来说是非常不可靠的跨浏览器。制作动画并不难，我只需要选择最接近SVG元素的父元素，这类似于SVG->switch->g->elements。