Come passare il mouse su un rect SVG?

Question

In questo pezzo di SVG (provato in FF 8, Safari 5.1.2, Chrome 16, tutto su Mac), quando si sposta il mouse sulla barra, nessuno dei browser rileva correttamente ogni evento di over-mouse-over/out, a volte funziona a volte no. Ma è coerente su tutti i browser quindi è probabilmente qualcosa sul codice SVG. L'utilizzo di onmouseover e onmouseout fornisce lo stesso risultato: non funziona correttamente.

Quale sarebbe il modo corretto di implementare su hover per gli angoli SVG rect?

<?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

Quello che sta succedendo è che gli eventi del mouse non vengono rilevati perché il riempimento è 'none', basta aggiungere:

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

Quindi funziona bene.

Answer 2

Provare a fornire un riempimento non trasparente.

---

Inoltre, il <style> ha bisogno di andare al di fuori della <svg>.