SVG元素不接收Opera和IE中的事件

Question

我有一个网页，其中有一个SVG以上的IMG元素应该在它上面绘制形状。

图形在浏览器中正确执行。但是当涉及到接收事件时，IMG实际上似乎阻止了事件/接收它（它没有自己附加任何事件，因此它没有被明确停止）。

例：
http://jsfiddle.net/UvRVX/12/（固定标记，添加圆圈） FF，Chrome：“svg收到mousedown”（正确）
Opera，IE9： - 无 - （不正确）

当通过CSS可见性或display：none隐藏图像时，它开始工作，但这种方式当然不能使用。

如何将SVG元素置于IMG元素之上以便它可以接收事件？ （在Opera中，IE9）
谢谢

Answer 1

造成这种情况的原因有两个原因：

1。 svg是空的。
即使你给它一个高度和宽度，我相信有些浏览器不会给它分配一个真正的大小，直到你实际添加一个形状。您可以通过在那里放置一个空矩形来解决这个问题：

<rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect>

2。由于pointer-events属性。您可以阅读更多here。默认情况下，它的值为visiblePainted，所以我真的不知道为什么Chrome和FF允许事件通过。您需要将其设置为"all"

另外要小心html，这很糟糕。

修正：

http://jsfiddle.net/mihaifm/ptLrB/2/

Answer 2

Opera和IE9实际上是正确的，因为圆圈的填充设置为none。单击圆圈的笔划时，警报会显示在所有浏览器中。点击圆圈内部会点击图像，因为圆圈的填充是透明的。

将pointer-events="visible"添加到圆圈以忽略圆圈填充的值。

Sample code / JSFiddle

来自SVG spec for pointer-events：

  

<强>可见

     

当'visibility'属性设置为visible并且指针位于元素的内部（即填充）或周边（即笔划）之上时，给定元素可以是指针事件的目标元素。 'fill'和'stroke'的值不会影响事件处理。

Answer 3

有趣的错误。当涉及z-index css值时，非html元素（此处为：<svg>）似乎行为不正确。

为了解决这个问题，我将其简单地包装在另一个div中：http://jsfiddle.net/UvRVX/6/

然而，如果你在svg中绘制一些东西，这些元素将被正确显示并接收事件：http://jsfiddle.net/UvRVX/7/（点击红色方块会发出警报，但不会在边缘附近）。