私はAI（adobe Illustrator）のセクションとエリアを使って地図をデザインし、最後のマップをSVGファイルとしてエクスポートしてHTMLページに表示しました。また、これらのセクションの詳細が別のExcelシートにあります。マウスオーバーでセクションを開くと、そのセクションの詳細がポップアップ表示されます。SVG上にマウスを置くと詳細がポップアップ表示されます
これを達成するためのアドバイスが必要です。
すべてのヘルプは高く評価され、
データは、JSONまたはこのようなJavaScriptのオブジェクトに変換する必要があります。最良の方法は、SVGオブジェクト上でJavaScriptのイベント負荷を使用することです
var xlsData = {
"RedRect": "This is the Red Rectangle!",
"Star": "This is the Star Shape!"
}
マウスイベントを添付します。 jQueryはロードイベントをオブジェクト要素にバインドできないため、loadイベントを設定するにはjavacript addEventListenerを使用する必要があります。 SVGファイル内
How to listen to a load event of an object with a SVG image?
、我々はIDSRedRectと
Starを持つ2つのオブジェクトがあります。今
<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);