当悬停在 svg 地图上时，会显示一个带有详细信息的弹出窗口答案

【问题标题】：when hover over svg map display a popup with details当悬停在 svg 地图上时，会显示一个带有详细信息的弹出窗口
【发布时间】：2016-11-07 11:49:10
【问题描述】：

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

我需要您就如何实现这一点提出建议。

感谢任何帮助，

【问题讨论】：

标签： javascript jquery html svg hover

【解决方案1】：

数据应转换为 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 文件中，我们有两个 ID 为 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 对象加载时附加我们的事件：

<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

【讨论】：