Question

我正在尝试在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上，它正在运行。

Answer 1

+1的问题..一个奇怪的行为..到目前为止我搜索的问题.. 我明白了：

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

和chrome：

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

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

Answer 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/

我希望我能正确理解你的问题。

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

2 个答案: