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对象的内容，然后从那里玩它。我已在下面添加了新的脚本代码。

＆＃13;

<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>

＆＃13;

Javascript SVG交互问题

2 个答案: