jquery.i を使用してマップ内の状態を強調表示する際に問題が発生し、javascript を使用して実装しました。` SVG Illustrator テスト
<object data="map_with_hover.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
<script>
var a = document.getElementById("alphasvg");
//it's important to add an load event listener to the object, as it will load the svg doc asynchronously
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
var delta = svgDoc.getElementById("states"); //get the inner element by id
delta.addEventListener("mouseover",function(evt){ evt.target.setAttributeNS(null,"opacity","0.5");},false); //add behaviour
delta.addEventListener("mouseout",function(evt){ evt.target.setAttributeNS(null,"opacity","1");},false); //add behaviour
},false);
</script>
</body>
</html>
`
このコードでは状態が簡単に強調表示されますが、ツールチップも追加したいのでjqueryでやりたいので、マウスオーバー時に状態名も表示されます。基本的に、SVGのIDまたはクラスまたはタグを使用して、jqueryを使用してさまざまなアクションを実行する方法を知りたいです。