Javascript SVG 交互问题

标签 javascript jquery svg onload object-tag

我正在尝试开发一个交互式 SVG map ,并且我想在鼠标进入 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>

最佳答案

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

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

关于Javascript SVG 交互问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44374581/

相关文章:

javascript - 如何将大量Javascript文件注入(inject)CHROME EXTENSION?

javascript - 根据不匹配某些值返回 JSON

jquery - jQuery 不能处理通过 Ajax 请求发送的 id 吗?

javascript - 如何使用表单创建弹出窗口?

javascript - d3示例不适用于html页面

animation - SVG 结合动画

css - 通过 CSS 的 SVG 背景图像未在 webkit 浏览器中显示

javascript - 在 Jest 中测试回调

javascript - 如何在 Jest 测试中真正调用 fetch

html - 将 svg 嵌入到 html 中的可重用性