Javascript SVG互動問題

Question

我正在嘗試開發交互式SVG貼圖，當鼠標在SVG圖像內輸入矩形時，我想做一些事情。 當前，當我的鼠標進入SVG圖像時，代碼會記錄到控制台，但是當我將鼠標懸停在矩形上時，代碼不會記錄到控制台。 任何幫助將非常感激。 謝謝！

 <object onload="svgOnLoad()" id="activeSVG" data="SVGNAME.svg" type="image/svg+xml"> </object> <script> function svgOnLoad() { console.log("SVG Loaded"); $("#activeSVG").mouseenter(function(e) { console.log("In the SVG") }); //Executed when the mouse enters an SVG rect element $("rect").mouseenter(function(e) { console.log("Mouse Entered rectangles!!") }); } </script> 

Answer 1

在https://www.tutorialspoint.com/svg/svg_interactivity.htm上有簡短描述。

對於mouseover事件，您需要jQuery mouseover功能： https : //api.jquery.com/mouseover/

Answer 2

弄亂了一點之后，我發現需要添加什么。 您需要獲取svg對象的內容，然后從那里開始使用它。 我在下面包括了新的腳本代碼。

 <script> function svgOnLoad() { // Get SVG object var officeMapFloor = document.getElementById("activeSVG"); // Get the content of the SVG object var svgDoc = officeMapFloor.contentDocument; // Access an ID within the content of the object var rect = svgDoc.getElementById("siesta"); // Apply the event listener rect.onmouseover = function(){ console.log("Finally in the rectangle"); }; } </script>