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

【问题标题】：SVG overflow visible in chrome but behind elementsSVG 溢出在 chrome 中可见但在元素后面
【发布时间】：2014-08-05 12:38:52
【问题描述】：

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

显示效果很好，但有一个问题：当我尝试在 SVG 之外的元素上放置一个事件时，它不起作用。就像 svg 元素在其他元素之后。我试过玩z-index，但它不起作用。我宁愿不要在那个答案Overflow: Visible on SVG 中使用viewBox。

代码如下：

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;
}

Here is the jsfiddle

当我单击溢出 SVG 的第一个圆圈时，它不会显示警报。但是对于一个，它在 SVG 内部可以工作。

问题似乎只存在于 Chrome 中。在 Firefox 和 IE 上它可以工作。

【问题讨论】：

对不起。刚刚用代码编辑了它。
不用担心，感谢您解决这个问题。我已经为此提交了一个 Blink 错误，crbug.com/401443，我很快就会进行审查。

标签： javascript html css svg

【解决方案1】：

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

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

对于铬：

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

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

【讨论】：

【解决方案2】：

首先，对不起我的英语水平。

你是对的，当你创造时

<circle id='c1' cx='10' cy='-10' r='5' onclick='alert("click");'></circle>

这是cy='-10'将circle#c1 下的<p> -10px 移到顶部

试试这个http://jsfiddle.net/9r78K/31/

希望我正确理解了您的问题。

【讨论】：

谢谢！所以我没有正确使用z-index property
欢迎您，如果您想了解有关 z-index 的更多信息：read this
抱歉没有工作。当我尝试你的小提琴时，我认为这是正确的。但是，我希望 circle#c1 高于 <p> 并且它也能正常工作。更像这样：jsfiddle.net/9r78K/32