SVG overflow visible in chrome but behind elements

Question

I'm trying to use the property overflow: visible on SVG.

It's displaying well but there is an issue : When I try to put an event on the element that is out of the SVG, it doesn't work. It's like the svg element is behind the other elements. I've tried to play with z-index but it doesn't work. I would rather prefer to don't use the viewBox in that answer Overflow: Visible on SVG.

Here is the code :

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

When I click on the first circle that overflows the SVG it's not displaying the alert. But for the one, that is inside the SVG it works.

The problem appears to be only in Chrome. On Firefox and IE it's working.

Answer 1

+1 for the question.. A strange behaviour.. and as far I googled about the issue.. I got this:

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

and for chrome:

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

So I think it is an issue.. waiting for other solutions too.

Answer 2

First of all, sorry for my english skill.

You are right, when you create

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

It's cy='-10'moves your circle#c1 under the <p> -10px to top

Try this http://jsfiddle.net/9r78K/31/

I hope I correctly understood your problem.