Javascript SVG 交互问题答案

【问题标题】：Javascript SVG Interaction IssueJavascript SVG 交互问题
【发布时间】：2017-11-06 13:26:11
【问题描述】：

我正在尝试开发交互式 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>

【问题讨论】：

标签： javascript jquery svg onload object-tag

【解决方案1】：

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

对于mouseover 事件，您需要jQuery mouseover 函数：https://api.jquery.com/mouseover/

【讨论】：

对，我知道我最终需要更改事件，但它没有记录任何一种方式。当我进入矩形时它仍然应该记录，但目前不是。
尝试将代码放入document.ready()函数中。也许，事件的注册是在 SVG 完全加载之前完成的。
但是它被称为 onload 是在准备好之后发生的，所以我不认为这是问题
前面是矩形吗？是否有其他元素与矩形重叠？
是的，矩形在最前面，但是它们在逻辑上是分组的<g></g>

【解决方案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>

【讨论】：