如何在SVG對象上移動時接收當前的鼠標位置？

我有一個div中有很多SVG對象。如何在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>

我怎樣才能收到當前mouseposition，當光標在這些SVG對象的一個？

旁註：沒有extern libs像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元素）上的mousemove處理程序僅返回相對鼠標位置。

編輯： svg對象沒有任何事件處理程序可能會停止事件傳播。

來源

2015-01-07 Frank

event.clientX; event.clientY？ –

問題是，當我移過SVG時，我沒有收到任何事件...所以clientX和clientY也不會工作。 – Frank

如果您想要在外部處理鼠標（即在父文檔中），請將SVG設置爲圖像。否則，在SVG文檔本身內處理鼠標。 –

你的對象元素中的SVG元素處理所有的鼠標事件。您可以通過向對象標籤添加樣式指針 - 事件：無來關閉此功能。

來源

2015-01-07 16:05:24

您的事件mousemoveHandler從不觸發。改用

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

如果這不起作用，你可以添加一個類到你的小部件和綁定的類。

編輯：

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

來源

2015-01-07 14:07:25 Mephiztopheles

它綁定到文檔...所以每次我將鼠標移動到整個文檔時它都會被觸發。但是當我輸入一個svg對象時它不起作用。 – Frank

發現你的錯誤，我想。將進行編輯。 – Mephiztopheles

我的錯...太多縮短了源代碼。其正確的html :-) – Frank

如何在SVG對象上移動時接收當前的鼠標位置？

回答

相關問題