¿Cómo pasar el mouse sobre un SVG rect?

Question

En esta pieza de SVG (probado en FF 8, Safari 5.1.2, Chrome 16, todo en Mac), al mover el mouse sobre la barra, ninguno de los navegadores detecta correctamente cada evento de sobre-desplazamiento del mouse, algunas veces funciona a veces no funciona. Pero es coherente en todos los navegadores, por lo que probablemente sea algo relacionado con el código SVG. El uso de onmouseover y onmouseout da el mismo resultado: no funciona correctamente.

¿Cuál sería la forma correcta de implementar en hover para SVG rect ángulos?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" version="1.1" style="display:inline"> 

<style type="text/css"> 
.bar { 
    fill: none; 
} 
.bar:hover { 
    fill: red; 
} 
</style> 
    <g> 
    <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" /> 
    </g> 
</svg> 

Answer 1

Lo que pasa es que los eventos de ratón no se detectan porque el relleno es 'ninguno', sólo tiene que añadir:

.bar { 
    fill: none; 
    pointer-events: all; 
} 

Entonces funciona bien.

Answer 2

Intente darle un relleno no transparente.

---

Además, el <style> tiene que ir fuera de la <svg>.