允许Raphael/SVG元素事件通过顶层的HTML触发

Question

我有一个html元素（允许动态文本环绕和调整大小）在Raphael生成的SVG元素的顶部分层。

问题是我有事件分配（mousedown，mouseup等等）到html下面的SVG元素。 SVG元素本身实际上是可以通过raphael.freeTransform插件拖放和缩放的。

当然，随着顶部的HTML这个元素不再接受事件。

我正在寻找一些解决方法，但真的不知道从哪里开始。该解决方案必须是跨浏览器兼容的，因此一些现代浏览器中允许元素忽略点击的新功能集不是可接受的解决方案。

注意：我尝试了通过在SVG本身中渲染文本来实现相同功能的所有方式，但实际上没有办法正确模拟我想要以动态方式执行的操作（即文本调整大小和用户换行类型）

我目前唯一可以想到的解决方案是以某种方式使用foreignObjects，但唉拉斐尔不支持它们，除非有人知道插件？

Answer 1

您正在寻找一些有关css pointer-events的效果。这是一个Mozilla黑客，后来被添加到webkit，并不支持IE。它允许您防止图层拦截鼠标事件。有办法让它跨平台工作（我相信Modenizr支持它，但不要在此引用我）。或者考虑一下：

css 'pointer-events' property alternative for IE