私はいくつかのクリック可能なマップを作成しています-そして、マップ内のすべての異なる郡をクリック可能にすることができるように、パスのタグにアクセスする方法を見つけることに失敗しました。(SVGファイルは非常に複雑です...これは構造であり、変更することはできません-すべての異なる状態に対して自動的に生成されます):
<svg width="932.25827pt" height="569.25354pt" viewBox="0 0 932.25827 569.25354" enable-background="new 0 0 932.25827 569.25354"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="Layers">
<g id="Ohio_Counties">
<clipPath id="SVG_CP_1">
<path d="M0,569.25354L0,0L932.25827,0L932.25827,569.25354L0,569.25354z"/>
</clipPath>
<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#4E4E4E" stroke-width="0.48003" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="
M374.18483,441.14215L375.38491,440.90214L375.62493,440.90214L376.58499,440.66213L376.82501,440.66213L377.54505,440.42212
L378.02508,440.42212L378.2651,440.42212L378.74513,440.42212L379.46518,440.66213L381.14529,440.66213L381.38531,440.66213L
381.62532,440.66213L382.10536,440.66213L382.8254,440.66213L384.50551,440.90214L384.74553,440.90214L386.18563,440.90214L386.42564,441.38217
L386.42564,441.62218L386.42564,441.86219L386.66566,441.86219L386.90567,441.86219L386.90567,442.1022L386.90567,442.34221L"/>
</path>
</g>
</g>
/* There are about 87 more paths in the file... this is just a part of one.*/
私はjquery.svgを使用していますが、ドキュメントで解決策が見つかりません。
これがjavascriptです:
function changeState(newState){
nS = newState.replace(/\s/g, '');
try {
var map = 'mapLayers/AEP'+nS+'Counties.svg';
$("#contentCounties").empty();
var currentCountyMap = $('#contentCounties').svg({loadURL: loc, onLoad: addClickEvents(this)});
} catch(err){
alert("the map " + currentCountyMap + " does not exist");
}
}
function addClickEvents(){
// this is where I want to put the code to
// add click events to the individual paths.
// Whether it's running a loop or using a jquery selector
// I'm fine with either.
// This is, in theory, what I think I want - but alas, it is wrong:
var svg=document.getElementByTagName("path");
alert(svg);
}