Почему происходит событие mouseenter/mouseleave при вводе/выходе дочерних элементов в SVG?

Question

У меня есть SVG, внутри которого есть больше SVG с переменным числом прямых элементов внутри них, все из которых генерируются из объекта данных. Вот общая иерархия:

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

Я обязан MouseEnter/MouseLeave события в .child-svg элементов, но я нахожу, что события стрельбы, когда моя мышь идет на пробельных в между <rect> элементами. Мое понимание mouseenter/mouseleave заключается в том, что они не должны срабатывать, когда курсор вводит/оставляет дочерние элементы - это похоже на поведение, которое вы ожидаете от mouseover/mouseout. И, конечно же, мне хотелось бы, чтобы события mouseenter/mouseleave запускались только после того, как я оставил каждый раздел (который я описал с помощью цветов).

Вот соответствующий скрипку: http://jsfiddle.net/ysim/yVfuK/4/

Edit: Я пытался давая .child-svg элементы высоту и ширину, но это не похоже на работу либо: http://jsfiddle.net/ysim/gMXuU/3

Edit: Вот скрипка с решением, исправлена ​​в соответствии с предложением @ pornel: http://jsfiddle.net/ysim/HUHAQ/

Спасибо!

Answer 1

Я полагаю, что у .child-svg нет отдельной площади, поэтому нет возможности навести ее прямо. Когда мышь оставляет <rect>, она оставляет .child-svg.

У SVG нет раскладки, поэтому дети не влияют на размер родительского элемента.

---

Вот решение: http://jsfiddle.net/gMXuU/4/

• добавить <rect> без заливки в качестве фона
• добавить pointer-events:all сделать невидимым элемент "видимым" с указателем мыши