Javascript SVG Interaction Issue

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

乱搞与它一点我发现了什么需要添加后。你需要获得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>

Answer 2

有一简短的描述，例如，在https://www.tutorialspoint.com/svg/svg_interactivity.htm。

对于mouseover事件，你需要jQuerymouseover功能：https://api.jquery.com/mouseover/