I have a HTML containing a embedded SVG with an object tag. I register event listeners for mousemove on the global document, but when mouse movement happens on an element inside the embedded SVG document the callback registered on the global document for mousemove is not called. It seems embedding is the issue here but could'nt figure out what the issue could be, I thought the SVG document is a child of the global document and the 开发者_开发技巧global document should get all the events. Can someone help ? Is the global document and the SVG document have no relationship ?
I've tried the following:
<div style="position:relative; background-color:red; height:300px">
<object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg+xml" height="300" width="400" style="position:absolute;z-index:1;"
onclick="console.log('clickSVG');"
onmousemove="console.log('moveSVG');"
></object>
<div style="height:150px; background-color:blue; z-index:2;"
onclick="console.log('clickDIV');"
onmousemove="console.log('moveDIV');"></div>
</div>
With the idea that a div layered above the object may catch the events, but it doesn't. I don't really know why; it might be worth a try to create the SVG object entirely in JS and attach the handlers directly.
Edit: Apologies for digging up the old post, I realised that a bit late; I hope this might still help anyone.
精彩评论