Как получить текущую позицию мыши при перемещении по объекту SVG?

Question

У меня есть div с множеством объектов SVG в нем.

<div id="outerDiv"> 
<div id="widget1"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
<div id="widget2"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
<div id="widget3"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
... 
</div> 

Как я могу получить текущее положение мыши, когда курсор находится над одним из этих объектов svg?

Sidenote: без extern libs, таких как D3, Snap ... только jQuery разрешено.

Это не работает, потому что Я не получаю никакого события mousemove, когда я перемещаюсь по объекту SVG.

var mousemoveHandler = function (event) { 
    event.preventDefault(); 
    console.log("doc.mousemove: " + event.pageX + " " + event.pageY); 
}; 
$(document).on("mousemove", mousemoveHandler); 

Кроме того, обработчик MouseMove на SVG элемента (например, невидимым г-элемент) возвращает только относительное mouseposition.

Редактировать: Объекты svg не имеют обработчиков событий, которые могут остановить распространение события.

Answer 1

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

Answer 2

Ваше событие mousemoveHandler никогда не срабатывает. использование вместо

$('object').hover(mousemoveHandler); 

Если это не работает, вы можете добавить класс на виджеты и свяжете на классе.

EDIT:

<div id="outerDiv"> 
<div id="widget1"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
<div id="widget2"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
<div id="widget3"> 
    <object type="image/svg+xml" data="my.svg"></object> 
</div> 
... 
</div> 

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

изменение <object type="image/svg+xml" data="my.svg"/>
в <object type="image/svg+xml" data="my.svg"></object>