Почему на SVG элементе могут быть мертвые зоны для события мыши?

Question

[Ninja Mate]

Есть график на d3.js и на нем для элементов заданы события:

var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('background', '#fff')
            .style('padding', '8 21px')
            .style('border', '2px rgba(0, 0, 0, 0.74) solid')
            .style('border-radius', '5px')
            .style('opacity', '0')
            .style('font-size', 'x-large');

//Курсор становится рукой
.attr("class", function(d){
                if(d.name=='Other')return 'hand';

.on('mouseover', function(d){
                tooltip.transition().duration(500)
                    .style('opacity', 0.9);

                tooltip.html(d)
                    .style('left', (d3.event.pageX +'px'))
                    .style('top', (d3.event.pageY+'px'))
                    .html(function() {
                        return "<strong>" +d.name + "</strong> <span style='color:red'>" + d.number + "</span>"
                    });

                d3.select(this)
                    .style('opacity', 0.5)
            })
            .on('mouseout', function(){
                tooltip.transition().duration(200)
                    .style('opacity', 0);

                d3.select(this)
                    .style('opacity', 1)
            });

Все работает, но в некоторые моменты мышка не реагирует на событие должным образом, курсор становится как для работы с текстом или просто обычным остается. Такие слепые зоны.
Кто сталкивался и как победить?

Answer 1

[Ninja Mate]

Загадка расскрыта, курсор попадал на невидимый tooltip и не раегировал на сам блок. Добавил здвиг в позицыю и все ок

tooltip.html(d)
                    .style('left', ((d3.event.pageX+40) +'px'))
                    .style('top', ((d3.event.pageY-40)+'px'))

Answer 2

[Archakov Dennis]

Помести SVG в какой-нибудь блок, и отлавливай события этого блока. Тогда не будет "мертвых зон"

Comments

[Ninja Mate]

так сразу и сделал. не помогло