при наведении на карту 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 для прикрепления событий мыши. Поскольку jQuery предотвращает привязку событий нагрузки к элементам объекта, мы должны использовать javascript addEventListener для настройки события загрузки.

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

Внутри файла SVG, у нас есть два объекта с идентификаторами 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(' '); 
     } 
    }); 

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