當鼠標懸停在svg地圖上時顯示一個彈出式細節

Question

我設計了一個帶有部分和區域的AI（adobe Illustrator）地圖，並將最終地圖導出爲SVG文件以顯示在html頁面上。此外，我還在單獨的Excel表格中提供了這些部分的詳細信息，當鼠標懸停在任何部分時，它會爲該部分的詳細信息製作一個彈出窗口。

我需要你的建議，如何做到這一點。

任何幫助理解，

Answer 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文件，我們與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(' '); 
     } 
    }); 

    $('#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(' '); 
     } 
    }); 

}, true); 

Plunker example