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

：あなたはjQuerymouseover機能を必要とするmouseoverイベントの場合

。 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に、例えば、あります。私が追加されるために必要なものを見つけビットのためにそれをいじり後https://api.jquery.com/mouseover/