在 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 对象之一上时，我如何接收当前的鼠标位置？

旁注：没有像 D3、Snap 这样的外部库……只允许 jQuery。

这不起作用，因为当我移动到 SVG 对象上时我没有收到任何 mousemove 事件。

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

此外，SVG 元素（例如不可见的 g 元素）上的鼠标移动处理程序 returns 仅相对鼠标位置。

编辑： SVG 对象没有任何可能会停止事件传播的事件处理程序。

Answer 1

您的事件 mousemoveHandler 从未触发。改用

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

如果这不起作用，您可以将 class 添加到您的小部件并绑定到 class。

编辑：

    <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>

Answer 2

对象元素中的 SVG 元素正在处理所有鼠标事件。您可以通过添加样式指针事件来关闭此功能：none 到对象标签。

在 SVG 对象上移动时如何接收当前鼠标位置？

How to receive the current mouseposition when moved over an SVG object?

javascript

jquery

svg

dom-events

mousemove