当鼠标悬停在svg地图上时显示一个弹出式细节

问题描述：

我设计了一个带有部分和区域的AI（adobe Illustrator）地图，并将最终地图导出为SVG文件以显示在html页面上。此外，我还在单独的Excel表格中提供了这些部分的详细信息，当鼠标悬停在任何部分时，它会为该部分的详细信息制作一个弹出窗口。当鼠标悬停在svg地图上时显示一个弹出式细节

我需要你的建议，如何做到这一点。

任何帮助理解，

答

的数据应该转换成JSON或javascript对象是这样的：

var xlsData = { 
    "RedRect": "This is the Red Rectangle!", 
    "Star": "This is the Star Shape!" 
}

最好的办法是使用一个SVG对象上的JavaScript事件负载附加鼠标事件。因为jQuery阻止将加载事件绑定到对象元素，所以我们必须使用javascript addEventListener来设置加载事件。

How to listen to a load event of an object with a SVG image?

里面的SVG文件，我们与IDS RedRect和Star两个对象：

<rect id="RedRect" x="118" y="131" class="st0" width="153" height="116"/> 
<polygon id="Star" class="st2" points="397,252.3 366.9,245.4 344.2,266.3 341.5,235.6 314.6,220.4 343,208.3 349.1,178.1 
369.4,201.4 400,197.8 384.2,224.3 "/>

现在，我们要做的是连接我们的活动时， svg objects loads：

<object id="svg" type="image/svg+xml" data="test-links.svg">Your browser does not support SVG</object>

$('object')[0].addEventListener('load', function() { 

    $('#RedRect', this.contentDocument).on({ 
     'mouseenter': function() { 
      $('#hover-status').text('#svg #RedRect Mouse Enter'); 
      $('#hover-data').text(xlsData['RedRect']); 
     }, 
     'mouseleave': function() { 
      $('#hover-status').text('#svg #RedRect Mouse Leave'); 
      $('#hover-data').html('&nbsp;'); 
     } 
    }); 

    $('#Star', this.contentDocument).on({ 
     'mouseenter': function() { 
      $('#hover-status').text('#svg #Star Mouse Enter'); 
      $('#hover-data').text(xlsData['Star']); 
     }, 
     'mouseleave': function() { 
      $('#hover-status').text('#svg #Star Mouse Leave'); 
      $('#hover-data').html('&nbsp;'); 
     } 
    }); 

}, true);

Plunker example

当鼠标悬停在svg地图上时显示一个弹出式细节

相关推荐