Bir SVG'de alt öğelere giriş/çıkış yaparken mouseenter/mouseleave olayları neden tetiklenir?

Question

İçinde hepsi bir veri nesnesinden oluşturulan değişken sayıda rect öğesi bulunan daha fazla SVG olan bir SVG var. İşte genel hiyerarşisi şöyledir:

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

Ben .child-svg elemanlarına MouseEnter/mouseLeave olayları bağlı ettik ama benim fare <rect> elemanları arasına boşluk gittiğinde olaylar ateş olduğunu buluyorum. Mouseenter/mouseleave hakkındaki anlayışım, imleç çocuk öğelerine girdiğinde/çıkarken ateş etmemeleridir - bu, mouseover/mouseout'tan bekleyeceğiniz davranışa benziyor. Ve elbette, en sevdiğim şey, fare bölümleri/mouseleave olayları için her bölümü bıraktığım zaman (sadece renkleri kullanarak çizdiğim) ateş etmektir.

İşte alakalı keman var: http://jsfiddle.net/ysim/yVfuK/4/

Düzenleme: Ben .child-svg elemanlarını bir yüksekliğe ve genişliğe vererek çalıştı, ancak bu da işe görünmüyordu: http://jsfiddle.net/ysim/gMXuU/3

Düzenleme: İşte var @ pornel'in önerisine göre düzeltildi, çözüm ile keman: http://jsfiddle.net/ysim/HUHAQ/

Teşekkürler!

Answer 1

Tahminimce, .child-svg'un kendi alanında herhangi bir alanı yoktur, bu yüzden doğrudan üzerine gelmenin bir yolu yoktur. Fare <rect>'dan ayrıldığında .child-svg'u bırakır.

SVG akış düzenine sahip değil, bu nedenle çocuklar ana öğenin boyutunu etkilemez. http://jsfiddle.net/gMXuU/4/