SVG溢出在chrome中可见但在元素后面

Question

我正在尝试overflow: visible在SVG上使用该属性.

它显示得很好,但是有一个问题:当我尝试将事件放在SVG之外的元素上时,它不起作用.这就像svg元素落后于其他元素.我试过玩,z-index但它不起作用.我更愿意不使用该viewBox答案溢出:在SVG上可见.

这是代码:

HTML

<p>Blabla</p>

<svg width="100" height='100'>
    <circle id='c1' cx='10px' cy='-10px' r='5' onclick='alert("c1")'></circle>
    <circle id='c2' cx='10px' cy='10px' r='5' onclick='alert("c2")'></circle>
</svg>

CSS

svg {
    overflow: visible;
}

circle {
    fill: black;
}

circle:hover {
    fill: red;
}

这是jsfiddle

当我点击溢出SVG的第一个圆圈时,它没有显示警报.但对于那个,它在SVG内部是有效的.

问题似乎只出现在Chrome中.在Firefox和IE上,它正在运行.

Answer 1

这个问题+1..一个奇怪的行为..到目前为止我用谷歌搜索了这个问题..我得到了这个：

https://bugs.webkit.org/show_bug.cgi?id=96163

对于铬：

https://code.google.com/p/chromium/issues/detail?id=231577

所以我认为这是一个问题..也在等待其他解决方案。