Perché gli eventi mouseenter/mouseleave si attivano quando si immettono/escono elementi figlio in un SVG?

Question

Ho uno SVG, all'interno della quale vi sono più SVG con un numero variabile di elementi rect loro interno, tutti generati da un oggetto dati. Ecco la gerarchia generale:

<svg class="parent-svg"> 
    <svg class="child-svg"> 
     <rect /> 
     <rect /> 
    </svg> 
    <svg class="child-svg"> 
     <rect /> 
     <rect /> 
    </svg> 
</svg> 

ho legato MouseEnter/eventi MouseLeave agli .child-svg elementi, ma mi sto trovando che gli eventi stanno sparando quando il mio mouse va al spazi bianchi tra le <rect> elementi. La mia comprensione di mouseenter/mouseleave è che non dovrebbero sparare quando il cursore entra/esce dagli elementi figlio - questo sembra un comportamento che ti aspetteresti da mouseover/mouseout. E, naturalmente, quello che mi piacerebbe idealmente è che gli eventi mouseenter/mouseleave si attivino solo quando ho lasciato ogni sezione (che ho delineato usando i colori).

Ecco il violino rilevanti: http://jsfiddle.net/ysim/yVfuK/4/

Edit: ho provato dando i .child-svg elementi di altezza e larghezza, ma che non sembrano lavorare sia: http://jsfiddle.net/ysim/gMXuU/3

Edit: Ecco il violino con la soluzione, fissata secondo il suggerimento di @ porneL: http://jsfiddle.net/ysim/HUHAQ/

Grazie!

Answer 1

La mia ipotesi è che .child-svg non abbia un'area a sé stante, quindi non c'è modo di passare il mouse direttamente. Quando il mouse lascia <rect> lascia anche .child-svg.

SVG non ha il layout del flusso, quindi i bambini non influiscono sulla dimensione dell'elemento padre.

---

Ecco la soluzione: http://jsfiddle.net/gMXuU/4/

• aggiungere un <rect> senza riempimento come sfondo
• aggiungere pointer-events:all per rendere elemento invisibile "visibile" al puntatore del mouse