Wenn Sie den Mauszeiger über die Svg-Karte bewegen, zeigen Sie ein Popup mit Details an

Question

Ich habe eine Karte auf AI (Adobe Illustrator) mit Abschnitten und Bereichen entworfen und die endgültige Karte als SVG-Datei zur Anzeige auf HTML-Seite exportiert. Auch habe ich die Details für diese Abschnitte in einem separaten Excel-Blatt, ich möchte, wenn Mouseover einen Abschnitt wird ein Popup mit den Details für diesen Abschnitt machen.

Ich brauche Ihren Rat, wie man das erreicht.

Jede Hilfe ist willkommen,

Answer 1

Die Daten sollten auf json oder ein JavaScript-Objekt wie folgt umgewandelt werden:

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

Der beste Weg, die Javascript-Ereignis Last auf einem SVG-Objekt zu verwenden ist um die Mausereignisse anzuhängen. Da jQuery das Binden von Ladeereignissen an Objektelemente verhindert, müssen wir Javascript addEventListener verwenden, um das Load-Ereignis einzurichten.

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

Innerhalb der SVG-Datei, wir haben zwei Objekte mit den ids RedRect und 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 "/> 

Nun, alles was wir tun müssen, ist unsere Veranstaltungen an, wenn die svg objects lädt:

<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