允許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