Javascript SVG Interaction Numéro

Question

J'essaie de développer une carte SVG interactive et je veux faire des choses lorsque la souris entre des rectangles dans l'image SVG. Actuellement, le code se connecte à la console lorsque ma souris entre dans l'image SVG, mais pas lorsque je souris sur les rectangles. Toute aide serait très appréciée. Merci!

<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

Après déconner avec elle pour un peu j'ai trouvé ce qu'il fallait ajouter. Vous devez obtenir le contenu de l'objet svg et ensuite jouer avec. J'ai inclus le nouveau code de script ci-dessous.

<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

Il y a une courte description, par exemple, sur https://www.tutorialspoint.com/svg/svg_interactivity.htm.

Pour mouseover événements dont vous avez besoin de la fonction jQuerymouseover: https://api.jquery.com/mouseover/