2

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

问题是我将事件（mousedown、mouseup 等）分配给了 html 下的 SVG 元素。SVG 元素本身实际上可以通过 raphael.freeTransform 插件进行拖动和缩放。

当然，顶部的 html 元素不再接收事件。

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

注意：我已经尝试了通过在 SVG 本身中呈现文本来实现相同功能的所有方式，但实际上没有办法以动态方式准确地模拟我想要做的事情（即文本在用户键入时调整大小和换行）

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

4

1 回答 1

4

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

IE 的 css 'pointer-events' 属性替代

于 2012-05-03T11:50:33.373 回答