Detection of element under the cursor but on a different layer in Firefox

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create two layers
2. In the bottom layer: add an element with DEFS and USE (see example below)
3. Select the top layer
4. When moving the mouse over the element with Firefox, it is detected as if it 
was on the top layer and the cursor changes. Clicking results in a Javascript 
exception from svgCanvas.getMouseTarget

In Safari and Chrome the behaviour is correct, i.e. the element is not detected 
and no exception is generated when clicking.

This is particularly annoying when the bottom layer contains a complete 
background, since there is no way to see when the mouse is on an element in the 
top level layer.

Please also notice that importing an SVG background image using 
svgCanvas.importSvgString will store this image as a DEFS and USE in the later 
version of SVG editor.

In what browser did you experience this problem? (ALL, Firefox, Opera, etc): 
Firefox

In what version of SVG-edit does the problem occur? (Latest trunk, 2.5.1,
etc): trunk, 2.5.1 and alpha

Please provide any additional information below.

Test image:

<svg width="735" height="468" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <svg id="svg_28">
   <rect id="svg_30" fill="#007f00" stroke="#000000" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="1.00007" y="0.00002" width="332" height="478"/>
  </svg>
 </defs>
 <g>
  <title>half_field</title>
  <use xlink:href="#svg_28" id="svg_29"/>
 </g>
 <g>
  <title>Layer 2</title>
  <rect fill="#FF0000" stroke="#000000" stroke-width="5" x="166" y="109" width="56" height="39" id="svg_2"/>
  <rect fill="#FF0000" stroke="#000000" stroke-width="5" x="407" y="115" width="48" height="27" id="svg_3"/>
 </g>
</svg>

Original issue reported on code.google.com by chrille....@gmail.com on 4 Apr 2011 at 8:47