Html SVG无法识别指针事件:无

Html SVG无法识别指针事件:无,html,css,svg,Html,Css,Svg,我有一个带有透明背景图像集的顶层,希望所有指针事件都被忽略。最初我用设置了这个功能,效果很好,但后来我发现IE不支持这个功能 进一步阅读后,我发现有几个地方说IE确实支持带有指针事件的:无,但我无法让它工作(我以前从未使用过SVG标记,所以我可能会把这一切都搞错) 请看这把我希望实现的非常简单的小提琴 根(最上面的)元素将不支持指针事件:无。这背后的原因是,这可能是一个安全漏洞,您可以使用SVG覆盖类似Facebook的按钮,并让点击通过,如本例所示 如果SVG元素不是根元素,那么单击应该通过。

我有一个带有透明背景图像集的顶层,希望所有指针事件都被忽略。最初我用
设置了这个功能,效果很好,但后来我发现IE不支持这个功能

进一步阅读后,我发现有几个地方说IE确实支持带有指针事件的
:无
,但我无法让它工作(我以前从未使用过SVG标记,所以我可能会把这一切都搞错)


请看这把我希望实现的非常简单的小提琴

根(最上面的)
元素将不支持
指针事件:无
。这背后的原因是,这可能是一个安全漏洞,您可以使用SVG覆盖类似Facebook的按钮,并让点击通过,如本例所示

如果SVG元素不是根元素,那么单击应该通过。这个例子应该适用于IE9(未测试)

但是,这并不能解决您的问题,因为您不能将HTML元素放入SVG元素中

我以前多次遇到过这个问题,我不得不用不同的方法来解决它。我建议您针对实际问题(可能还有屏幕截图)提出一个新问题,看看如何解决这个问题。

根本原因 绝对定位的SVG不会将点击传播到IE9中的HTML元素。

请参阅此webkit测试用例讨论:,以及相应的。这意味着,有趣的是,这个bug几乎也进入了WebKit,但及时得到了修复

对于IE 9,结果如下:

IE 9.0.8112.16421=未通过测试1:浮动;通过测试2:内联

权变措施
请参阅有关模拟
指针事件:无的StackOverflow帖子-


他们特别讨论了非SVG前端元素,但将点击转发到底层元素的技术也可能适用于您的情况。

指针事件:根SVG元素上的无
似乎在IE10中有效,但在IE9中无效。对吗?没有办法让它在IE9中工作?但为什么它能工作(点击IE9中的电视)?@MarcoJakob查看我关于ngDev问题根源的帖子。在您的TV示例中,SVG覆盖并不是绝对定位的,因此它在IE9中正常工作。@Duopixel是否准确?请参阅-如果我错了,请纠正我,但蓝色矩形似乎是最顶层的SVG元素,并且在IE9中支持
指针事件:none
。似乎一些旧的IE过滤器(例如
过滤器:progid:DXImageTransform.Microsoft.Blur(pixelradius=0)
,具有最小的视觉影响)启用
指针事件有一个副作用:无
,即使对于绝对定位的根SVG元素也是如此。这个例子在IE9中适用: