Dlaczego zdarzenia mouseenter/mouseleave są uruchamiane podczas wprowadzania/opuszczania elementów potomnych w SVG?

Question

Mam SVG, wewnątrz którego jest więcej SVG ze zmienną liczbą elementów rect wewnątrz nich, wszystkie generowane z obiektu danych. Oto ogólna hierarchia:

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

Mam związany mouseenter/mouseLeave zdarzenia do .child-svg elementów, ale jestem stwierdzenia, że ​​zdarzenia są wypalania gdy mój myszy przechodzi do spacji pomiędzy <rect> elementów. Moje rozumienie mouseenter/mouseleave polega na tym, że nie powinny one strzelać, gdy kursor wchodzi/opuszcza elementy potomne - wydaje się to być zachowaniem, którego można się spodziewać po najechaniu myszą/myszką. I oczywiście chciałbym, aby zdarzenia mouseenter/mouseleave były uruchamiane tylko wtedy, gdy opuściłem każdą sekcję (którą wybrałem za pomocą kolorów).

Oto odnośny skrzypce: http://jsfiddle.net/ysim/yVfuK/4/

Edit: Próbowałem dając .child-svg elementy wysokość i szerokość, ale nie wydają się działać albo: http://jsfiddle.net/ysim/gMXuU/3

Edit: Oto skrzypce z rozwiązaniem, naprawione zgodnie z sugestią @ pornel: http://jsfiddle.net/ysim/HUHAQ/

Dzięki!

Answer 1

Domyślam się, że .child-svg nie ma samodzielnie żadnego obszaru, więc nie można go bezpośrednio najechać. Kiedy mysz opuszcza <rect>, pozostawia również.

SVG nie ma układu przepływu, więc dzieci nie zmieniają rozmiaru elementu nadrzędnego jako.

---

Oto rozwiązanie: http://jsfiddle.net/gMXuU/4/

• dodać <rect> bez wypełnienia jako tło
• dodać pointer-events:all zrobić niewidzialny pierwiastek "widoczny" dla wskaźnika myszy