Clipped SVG polygon receives mouse events

Question

Here are the facts:

1. I have a div with rounded corners containing an SVG element with rounded corners that creates a circle.

2. Inside the circle (SVG) I am drawing four polygons that make out different circle quadrants.

3. The polygons respond to hover by changing color - so that when a user mouse is over a specific quadrant in the circle - it lights up.

4. The SVG and the div containing the SVG both have overflow:hidden CSS directive.

5. When I mouse over an area outside the circle (but inside the clipped rectangle of the polygon) - the corresponding quadrant lights up...

Why is the element responding to mouse over even though I am hovering over a clipped area? How can I make sure this will not happen? (without creating occluding transparent elements - I want to be able to touch something in the layer below...).

EDIT: added fiddle as requested:

http://jsfiddle.net/JVQD8/

In the fiddle - note that the surrounding div is bordered with a red line. the polygons (in blue) are clipped by the red border (div), and when you hover over a polygon it becomes a lighter shade of blue. The polygon highlights outside the area of the red circle border if on the polygon.

Edit:

As commented by Robert Longson, there is no problem at all in Firefox. However, in chrome the problem is as described, and in IE the SVG polygon is not even responding to hover.

So the question about chrome remains as is - only in chrome. How do i know if this is a bug that i should report, or if this is a designed behavioral difference?

Answer 1

Try experimenting with the pointer-events attribute.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events