Firefox 3.6 hit testing overlapping SVG shapes

I am drawing 2 SVG paths much like Google Maps does with directions.

The problem I have is that the section of the first path that is overlapped by the bounding box of the second path won't fire the mouseover, mouseout or click events. Even though the event handlers are on the path dom element the events seem to fire when the mouse is anywhere inside the the bounding box of the path.

Is there anyway to avoid this? On Chrome, Safari and Opera I don't have this problem. It is only SVG in Firefox.

I've created a test example. When ever you move the mouse over a circle it is supposed to alert you of it's colour. You will see that if you approch the green circle from the very right side it works because it falls outside the 300px width of the red circle container. However if you approach from the top or bottom of the green circle you will get nothing. Now try the same thing in Chrome/Safari/Opera and you will see that it works as expected.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"&gt; 
<head> 
 <title>SVG embedded inline in XHTML</title>

 <script type="text/javascript">
  window.onload = function () {
   var red = document.getElementById('red-circle');
   var green = document.getElementById('green-circle');


   red.onmouseover = function (e) {
    alert('red mouse over');
   };
   green.onmouseover = function (e) {
    alert('green mouse over');
   };
  };
 </script>
</head> 
<body> 

 <svg:svg style="position: absolute; top: 0px; left: 110px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
  <svg:circle id="green-circle" cx="150px" cy="100px" r="50px" fill="green" /> 
 </svg:svg>  

 <svg:svg style="position: absolute; top: 0px; left: 0px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
  <svg:circle id="red-circle" cx="150px" cy="100px" r="50px" fill="#ff0000" /> 
 </svg:svg>
</body> 
</html>

ansaurus

tags:

views:

answers:

Firefox 3.6 hit testing overlapping SVG shapes

related questions