我有一个网页，其中 IMG 元素上方有 SVG，应该在其上绘制形状。
绘图在浏览器中正确执行。但是当涉及到接收事件时，IMG 实际上似乎阻止了事件/接收它（它本身没有附加任何事件，因此它没有被显式停止）。
示例： http:
//jsfiddle.net/UvRVX/12/（固定标记，添加圆圈）FF，Chrome：“svg received mousedown”（正确）
Opera，IE9：-nothing-（错误）
当图像通过 CSS 可见性或 display: none 隐藏时，它开始工作，但这种方式当然不能使用。
如何将 SVG 元素放在 IMG 元素上方以便它可以接收事件？（在 Opera，IE9 中）
谢谢
为什么这不起作用有两个原因：
1. svg 为空。
即使你给了它一个高度和宽度，我相信一些浏览器在你实际添加一个形状之前不会给它分配一个真实的大小。您可以通过在此处放置一个空矩形来解决此问题：
<rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect>
2.因为pointer-events财产。你可以在这里阅读更多。默认情况下，它的值是visiblePainted，所以我真的不知道为什么 Chrome 和 FF 允许事件通过。您需要将其设置为"all"
还要小心 html，它的格式很糟糕。
Opera 和 IE9 实际上是正确的，因为圆圈的填充设置为none. 当您单击圆圈的笔划时，警报会显示在所有浏览器中。由于圆圈的填充是透明的，因此在圆圈内单击会点击图像。
添加pointer-events="visible"到圆以忽略圆的填充值。
来自指针事件的 SVG 规范：
可见的
当“可见性”属性设置为可见并且指针位于元素的内部（即填充）或周边（即笔划）上时，给定元素可以是指针事件的目标元素。'fill' 和 'stroke' 的值不影响事件处理。
有趣的错误。当涉及到 z-index css 值时，非 html 元素（此处<svg>：）似乎表现不正确。
为了修复它，我将它简单地包装在另一个 div 中：http: //jsfiddle.net/UvRVX/6/
但是，如果您在 svg 中绘制某些内容，这些元素将正确显示并接收事件：http: //jsfiddle.net/UvRVX/7/（单击红色方块会发出警报，但不会出现在边缘） .