当鼠标悬停在svg地图上时会显示一个包含详细信息的弹出窗口

Question

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

我需要你就如何做到这一点提出建议。

感谢任何帮助，

Answer 1

数据应该转换为json或javascript对象，如下所示：

std'

最好的方法是使用svg对象上的javascript事件加载来附加鼠标事件。因为jQuery阻止将load事件绑定到object元素，所以我们必须使用javascript var xlsData = { "RedRect": "This is the Red Rectangle!", "Star": "This is the Star Shape!" } 来设置load事件。

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

在SVG文件中，我们有两个包含ID addEventListener和RedRect的对象：

Star

现在，我们所要做的就是在加载svg对象时附加我们的事件：

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

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

Plunker example