【问题标题】：SVG not recognising pointer-events:noneSVG 无法识别指针事件：无
【发布时间】：2012-12-08 00:08:51
【问题描述】：

我有一个带有透明背景图像集的顶层，并希望忽略所有指针事件。所以最初我用<div style="pointer-events"></div> 进行了这个设置，效果很好，但后来我发现 IE 不支持这个。

进一步阅读我发现有几个地方说 IE 确实支持 <svg> 和 pointer-events:none，但我无法让它工作（我以前从未使用过 SVG 标签，所以我可能做错了）。

请看这个我希望实现的非常简化的小提琴。 http://jsfiddle.net/AGVTM/

【问题讨论】：

【解决方案1】：

根本原因

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

请参阅此 webkit 测试用例讨论：REGRESSION(r66731): pointer-events are broken in some cases，以及对应的minimal test case。 意思是，有趣的是，这个错误几乎也进入了 WebKit，但及时得到了修复。

在 IE 9 的情况下，结果：

IE 9.0.8112.16421 = 测试 1 失败：浮动；通过测试 2：内联

解决方法

请参阅 StackOverflow 上关于模拟 pointer-events: none—How to make Internet Explorer emulate pointer-events:none? 的帖子

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

【讨论】：

【解决方案2】：

根（最顶部）<svg> 元素将不支持pointer-events: none。这背后的原因是它可能是一个安全漏洞，您可以使用 SVG 覆盖 Facebook Like 按钮并让点击通过，如本例中http://jsfiddle.net/rVxTn/

如果 SVG 元素不是根元素，则应通过点击。此示例应适用于 IE9（未经测试）

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

我以前多次遇到过这个问题，我不得不以不同的方式解决它。我建议您针对实际问题（可能还有屏幕截图）打开一个新问题，看看如何解决这个问题。

【讨论】：

pointer-events: none 在根 SVG 元素上似乎在 IE10 中有效，但在 IE9 中无效。那是对的吗？还有没有办法让它在IE9中工作？
但是为什么here（在 IE9 中点击电视）会起作用？
@MarcoJakob 查看我关于 ngDev 问题根本原因的帖子。在您的电视示例中，SVG 覆盖不是绝对定位的，因此它在 IE9 中可以正常工作。
@Duopixel 准确吗？请参阅bug-45467-attachments.webkit.org/attachment.cgi?id=94332——如果我错了请纠正我，但看起来蓝色矩形是最顶层的 SVG 元素并且在 IE9 中支持pointer-events: none。
似乎一些旧的 IE 过滤器（例如 filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0)，具有最小的视觉影响）具有启用 pointer-events:none 的副作用，即使对于绝对定位的根 SVG 元素也是如此。这个例子在 IE9 中适用于我：jsfiddle.net/58frLccc/2