SVG不识别pointer-events:none。

Question

我有一个带有透明背景图像的顶层面板，想要忽略所有指针事件。最初，我使用了 <div style="pointer-events"></div>，这很有效，但后来我发现IE不支持它。

通过进一步阅读，我发现IE确实支持<svg>和pointer-events:none，但我无法让它正常工作（因为我以前从未使用过SVG标签）。

请查看这个非常简单的fiddle，以了解我希望实现的效果。 http://jsfiddle.net/AGVTM/

- dev

Answer 1

根（最顶部）<svg>元素不支持pointer-events: none。原因是可能存在安全漏洞，你可以用SVG覆盖Facebook的“赞”按钮，并让点击穿过，就像这个例子中展示的那样：http://jsfiddle.net/rVxTn/ 如果SVG元素不是根元素，则应该能够穿透点击。此示例应在IE9上工作（未经测试）：http://jsfiddle.net/DLEsn/ 然而，这并不能解决你的问题，因为你无法将HTML元素放在SVG元素内部。

我之前遇到过这个问题，我必须用不同的方法来解决它。我建议你提出一个新问题，附上实际问题（可能还有截图），以了解如何解决它。

- methodofaction

---

根据我的了解，pointer-events: none 在 SVG 根元素上在IE10中有效，但在IE9中无效。这是正确的吗？那么在IE9中没有办法让它起作用吗？ - Marco Jakob

但是为什么它在这里起作用（点击IE9中的电视）？链接 - Marco Jakob

@MarcoJakob请看我关于ngDev问题根本原因的帖子。在您的电视示例中，SVG叠加层没有绝对定位，因此在IE9中可以正常工作。 - Brian Jordan

@Duopixel这是否准确？请参见https://bug-45467-attachments.webkit.org/attachment.cgi?id=94332 — 如果我错了，请纠正我，但看起来蓝色矩形是最上层的SVG元素，并在IE9中支持pointer-events: none。 - Brian Jordan

看起来一些旧的IE过滤器（例如filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0)，因为视觉影响最小）会产生一个副作用，即使是绝对定位的根SVG元素也会启用pointer-events:none。这个例子在我的IE9上可以工作：http://jsfiddle.net/58frLccc/2/ - Ilya Streltsyn

Answer 2

根本原因

在IE9中，绝对定位的SVG图像无法将点击事件传递给HTML元素。

请参阅此webkit测试案例讨论：REGRESSION(r66731)：pointer-events在某些情况下失效，以及相应的最小测试案例。 有趣的是，这个bug几乎也出现在了WebKit中，但及时得到了修复。

在IE 9的情况下，结果如下：

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

解决方法

请参阅此StackOverflow帖子，了解模拟pointer-events:none的方法：如何使Internet Explorer模拟pointer-events:none？

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

- Brian Jordan