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

allowing Raphael/SVG element events to fire through HTML layered on top

本文关键字:分层 顶部 HTML 触发 Raphael SVG 元素 事件 允许      更新时间:2023-09-26

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

问题是我为html下方的SVG元素分配了事件(鼠标向下,鼠标向上等(。 SVG元素本身实际上是可拖动的,可以通过raphael.freeTransform插件进行扩展。

当然,由于 HTML 位于顶部,此元素不再拾取事件。

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

注意:我已经尝试了通过在 SVG 本身中渲染文本来实现相同功能的各种方式,但实际上没有办法以动态方式准确模拟我想做的事情(即文本在用户键入时调整大小和换行(

我目前能想到的唯一解决方案是以某种方式使用 foreignObjects,但唉,除非有人知道插件,否则 Raphael 不支持它们?

你正在寻找一些与css指针事件效果的东西。这是一个Mozilla黑客,后来被添加到webkit中,IE不支持。它允许您防止图层拦截鼠标事件。有一些方法可以让它跨平台工作(我相信 Modenizr 支持它,但不要引用我的话(。或者考虑一下:

IE 的 css"指针事件"属性替代