我有非洲的svg地图。如果我点击某个国家/地区，我希望能够打开另一个包含该国家/地区的svg或网页。我有svg图像。 我尝试了以下方法：
<style
type="text/css"
id="style">
.land
{
clip-rule:evenodd;fill:#fefee4;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.40000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision;
}
path:hover
{
clip-rule:evenodd;fill:#ff9177;fill-opacity:2;fill-rule:nonzero;stroke:#000000;stroke-width:0.40000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision;
}
</style>
<script type="text/ecmascript">
<![CDATA[
var transMatrix = [1,0,0,1,0,0];
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
mapMatrix = svgDocument.getElementById("map-matrix");
width = evt.target.getAttributeNS(null, "width");
height = evt.target.getAttributeNS(null, "height");
paths = svgDocument.getElementsByTagName("path");
pl = paths.length;
for(i = 0; i<pl; i++)
{
paths[i].addEventListener('click', function()
{
document.getElementById("country_name_2").firstChild.data = this.id;
}
);
}
}
function buttonClick(evt)
{
alert('Click');
}]]>
<g
id="g5494">
<a xlink:href="http://www.w3.org">
<path
label="Mali"
id="ml"
class="land ml"
d="m 368.72832,538.66581 c 0.16863,-0.61198 0.67242,-1.55625 0.67242,-2.22273 0,-2.11108 -0.67242,-3.33375 -0.67242,-5.44481 0,-0.72301 -0.16864,-1.2227 0,-1.88917 0.16863,-0.83394 1.40183,-0.77814 1.79396,-1.55625 0.67244,-1.33293 1.06515,-2.11106 1.34546,-3.55566 0.55981,-2.66728 0.1124,-4.33382 0.44775,-7.11208 0.11243,-1.11101 0.61758,-1.72303 1.12175,-2.66657 0.95332,-1.66721 1.96224,-2.83407 3.81108,-3.33376 2.18689,-0.612 3.64437,-0.83394 5.38213,-2.22272 0.33573,-0.22194 0.72866,-0.33358 0.8969,-0.66647 1.45688,-2.44466 0.78446,-4.39032 1.56951,-7.11205 0.0563,-0.27841 -0.16671,-0.66714 0,-0.8891 0.67241,-0.77743 1.73756,-0.22262 2.69029,-0.66715 1.17795,-0.55482 1.12154,-1.88846 1.56932,-3.11113 0.39291,-1.05591 1.06612,-1.66654 1.5701,-2.6666 0.89708,-1.834 1.51387,-3.05667 2.69047,-4.66739 1.45729,-1.94563 2.46701,-4.00091 4.93339,-4.00091 2.12991,0 3.2509,1.1117 5.38138,1.1117 1.28978,0 2.41077,-0.33357 3.13884,-1.33362 0.33652,-0.50035 0.0562,-1.27849 0.44854,-1.77818 0.61738,-0.83326 1.62631,-0.94491 2.69089,-1.11102 1.34562,-0.27845 2.24251,0 3.58736,-0.22194 1.45747,-0.22262 2.24253,-0.66716 3.58737,-1.33366 l 39.24011,-24.89179 20.40427,0 2.6905,0.88908 0,0 c 1.56931,0.22192 2.41135,0.22192 3.98087,0.22192 4.14775,0 6.44592,-0.33358 10.5937,-0.66647 1.73834,-0.11163 2.74728,-0.0566 4.48485,-0.22261 3.58735,-0.44386 5.4934,-1.55557 8.96873,-2.22203 6.22339,-1.27848 9.97823,-1.05656 16.36853,-1.55626 2.80292,-0.22193 4.37244,-0.44455 7.17535,-0.88842 0.16865,-2.44532 1.34544,-4.00091 1.34544,-6.44555 2.29892,-0.33357 3.53177,-0.16677 5.8299,-0.44457 1.40184,-0.16675 2.52262,0.1662 3.58718,-0.66645 1.79419,-1.38946 1.79419,-3.22279 2.4666,-5.33388 0.56099,-1.77816 1.12156,-2.72309 1.794,-4.44544 0.72939,-1.77751 1.45746,-2.66661 2.2425,-4.44478 0.84127,-1.88914 0.67224,-3.33375 1.34467,-5.33388 0.67321,-2.00011 1.00972,-3.27858 1.34563,-5.33385 0.28088,-1.66719 0.8969,-2.66729 0.8969,-4.38963 0,-0.38872 -0.22389,-0.55618 -0.22389,-0.94423 l 0,-32.00385 0,0 c -2.85854,0.22192 -5.10105,0.66648 -7.84777,1.33359 -0.673,0.11107 -1.12155,0.44457 -1.84961,0.44457 l -4.37243,0 c -1.90581,0 -3.30767,-0.5555 -4.54126,-2.00079 -0.89688,-1.05452 -0.72805,-2.16622 -0.89688,-3.55568 -0.11244,-1.00005 -0.44855,-1.6107 -0.44855,-2.61076 l 0,-5.4455 c 0,-1.50043 -1.28844,-2.22206 -2.46642,-3.05602 -2.35456,-1.72233 -3.75504,-2.88919 -6.27844,-4.44475 -1.00892,-0.61134 -1.68137,-1.11171 -2.69028,-1.77819 -0.72867,-0.44454 -0.95255,-1.27783 -1.79399,-1.55557 -1.90602,-0.66716 -3.41893,0.11104 -5.38136,-0.44457 -1.1764,-0.33357 -1.73758,-1.11168 -2.69086,-1.77816 -2.91496,-2.16622 -4.09157,-4.00024 -6.27769,-6.88942 -1.79397,-2.38884 -2.57902,-4.11188 -4.93358,-6.00103 -1.68135,-1.33364 -2.9706,-2.05525 -4.26038,-3.77831 l -95.96829,-74.4528 0,0 -30.71921,-0.22263 5.15748,163.57497 8.29613,3.5557 -9.41709,12.44591 -65.69808,-2.44466 c -1.00912,-0.55552 -2.18632,-1.16752 -3.13962,-1.77819 -0.39155,-0.22194 -0.39155,-0.8891 -0.89631,-0.8891 -0.89688,0 -1.12154,0.83328 -1.79396,1.33366 -1.34545,1.00005 -2.18553,1.55624 -3.58797,2.44465 -1.12096,0.7223 -1.79341,1.55557 -3.13883,1.55557 -1.62516,0 -2.46643,-0.88841 -4.03593,-1.11102 -2.7465,-0.44455 -4.37223,-0.55552 -7.17535,-0.88908 -1.06455,-0.11106 -1.62495,-0.44388 -2.69087,-0.44388 -0.78504,0 -0.8401,1.00007 -1.34486,1.55557 -0.84067,0.94423 -1.51369,1.49974 -2.4672,2.44465 -0.33571,0.33359 -0.39133,0.88909 -0.89687,0.88909 -2.0735,0 -2.85796,-1.834 -4.25981,-3.33374 -1.96146,-2.11176 -3.3633,-3.33374 -4.48426,-6.00104 -2.80293,0.88913 -4.48505,1.55557 -7.17594,2.6673 -1.28862,0.49969 -2.46581,0.72161 -2.91435,2.00009 -0.84069,2.38885 0,4.05537 -0.89689,6.4449 -0.89711,2.49979 -2.19716,3.28271 -4.1032,5.17251 l 0,0 c -0.44855,2.66661 -1.05428,3.93966 -1.05428,6.60692 0,1.50042 1.56931,2.00011 1.56931,3.50121 0,1.94362 -0.22388,3.05532 -0.22388,5.00028 0,2.44467 0.28029,3.88927 1.12098,6.16648 0.3929,1.05653 0.50475,2.27853 1.57009,2.66726 0.61679,0.2226 1.17718,0.2226 1.79338,0.44453 3.5872,1.4446 4.93284,4.77837 4.93284,8.66763 0,2.16757 -0.84011,3.4447 -1.794,5.33386 -0.78447,1.61208 -1.00834,2.7231 -1.56951,4.44475 l 0,0 c -0.33592,1.33366 0.44855,2.22276 0.44855,3.61222 0,1.00004 -0.44855,1.77817 0,2.61144 0.33649,0.66647 0.95408,0.8884 1.56932,1.33296 1.00971,0.77811 1.85038,1.33362 3.13961,1.33362 1.62572,0 2.41077,-1.11102 4.03574,-1.11102 0.44853,0 0.33649,0.72231 0.67319,0.8891 0.61681,0.38941 1.17718,0.66648 1.79398,1.11101 0.88254,0.68011 1.08182,2.1145 2.01786,2.44468 1.74242,-1.04704 2.47474,-2.37387 4.25981,-3.33377 1.23554,-0.6651 2.24253,-1.45344 2.89362,-2.45758 0.24579,0.29136 0.13374,0.73591 0.4697,0.90203 0.95328,0.50036 1.68212,0.44453 2.69107,0.88907 1.85039,0.83397 2.85931,2.00013 4.9328,2.00013 1.28981,0 2.01786,-0.55553 3.13942,-1.11102 2.07428,-1.11171 3.36349,-1.66723 5.38135,-2.88921 1.73778,-1.05588 2.85933,-2.22273 4.93283,-2.22273 0.84144,0 1.28999,0.83393 1.5695,1.55556 0.67301,1.61208 0.22449,2.83407 0.8969,4.44544 0.3365,0.77747 1.17797,0.94495 1.79397,1.55558 1.17739,1.16685 1.56953,2.33369 1.56953,4.00024 0,0.88908 -0.44855,1.33363 -0.44855,2.22274 0,0.77742 0.5604,1.111 0.89709,1.77748 1.12079,2.11177 2.74727,2.7231 4.48428,4.44546 -1.84961,1.44461 -2.35458,3.33308 -2.35458,5.72326 l 0,4.278 1.8504,0 c 0.84067,0 1.17662,-0.72232 1.8496,-1.11173 0.7294,-0.44453 1.17797,-0.72162 1.79399,-1.33362 0,1.77818 -0.16865,3.11183 0.89708,4.44546 0.22391,0.33288 0.28029,0.72229 0.67244,0.88908 1.96222,0.8884 3.47534,0.61134 5.38135,1.55556 2.1867,1.05589 3.25148,2.7231 4.70876,4.66673 l 0,0 c 0.33668,0 0.50494,0.22258 0.84142,0.22258 0.56041,0 0.83993,-0.4445 1.40051,-0.4445 1.62631,0 2.69087,0.27841 4.03651,1.111 2.24254,1.38945 2.74727,4.00091 5.38135,4.00091 0.78503,0 0.89688,-0.94423 1.34542,-1.55558 0.50476,-0.66714 0.95331,-1.16685 1.56934,-1.77817 0.95348,-0.94423 1.85039,-1.22267 2.69106,-2.22271 0.2239,-0.27846 0.16864,-0.6665 0.44777,-0.88911 1.73834,-1.6114 3.42049,-2.22275 5.82992,-2.22275 1.6263,0 2.74726,0.22263 4.03649,1.11174 0.9533,0.66647 1.17718,1.6672 1.79398,2.66659 1.23281,2.00078 2.29814,4.00091 4.70815,4.00091 0.72942,0 0.78505,-0.94426 1.12176,-1.5556 0.39213,-0.77811 0.72862,-1.22265 1.12077,-2.00079 0.33669,-0.66644 0.22388,-1.38945 0.89708,-1.77749 0.5604,-0.33358 1.12098,0.22193 1.79322,0.22193 1.40185,0.0552 2.1869,-0.22193 3.58816,-0.22193 l 0,0 z">
<desc
id="desc5775">Mali</desc>
<title
id="title5773">Mali</title>
</path>
</a>
<path
label="Burkina Faso"
id="bf"
class="land bf"
onclick="Burkina_Faso.svg"
d="m 479.71969,456.21183 c -1.96245,4.7232 -4.25983,7.27887 -4.25983,12.44593 0,1.44459 0.61603,2.22204 1.12098,3.55567 1.40107,3.77829 3.41971,5.61229 6.27826,8.44566 1.06533,1.05591 1.96224,1.66655 3.36349,2.22207 1.00893,0.3894 1.96223,0.27843 2.69089,1.11102 0.44795,0.50105 0.3359,1.16752 0.44795,1.77817 0.33651,1.4453 0.67301,2.22273 1.34545,3.55637 0.8969,1.83403 1.906,2.77756 3.36328,4.22284 0.8971,0.88909 1.34563,1.66653 2.46641,2.22205 2.01806,1.00005 3.30788,1.33364 5.38136,2.22274 2.35458,1.05588 3.98088,0.88909 6.27845,2.00009 0.28088,0.11107 0.72942,0 0.8969,0.22196 1.00893,1.1117 0.22466,2.44531 0.22466,4.0009 0,2.66724 0.95329,4.05671 1.56932,6.66748 0.3929,1.72237 0.56059,2.77826 1.12098,4.44478 l 0,0 c -0.89711,1.6107 -1.23285,3.11181 -1.79398,4.8893 -0.44856,1.38878 -0.27953,2.77825 -1.56953,3.55571 -0.72805,0.38872 -1.40106,0.22262 -2.29737,0.22262 -3.9809,0 -6.22265,-0.0559 -10.20215,-0.0559 -0.67319,0 -0.95406,0.72232 -1.40262,1.16684 -1.28844,1.27782 -2.18534,1.94429 -3.36271,3.33375 -0.78504,0.88911 -0.95253,1.72237 -1.5701,2.66729 -0.67242,1.00005 -1.56932,1.00005 -2.24174,2.0001 l 0,0 c -2.07351,-0.49968 -3.25145,-0.88907 -5.38196,-1.11104 -1.06399,-0.11162 -1.68137,0.11107 -2.69048,-0.2226 -1.06456,-0.33356 -1.51292,-1.11101 -2.46641,-1.77749 -1.23341,-0.8891 -2.63465,-0.44455 -4.03651,-0.8891 l 0,0 c -1.7932,-2.3902 -4.14776,-2.8892 -7.17456,-2.8892 -2.13048,0 -3.3635,0.27708 -5.38136,0.88907 -1.23359,0.33291 -1.51369,1.61073 -2.69087,2.22208 -1.56951,0.83326 -2.69107,1.55626 -4.54008,1.55626 -7.51189,0 -11.71663,-0.16754 -19.22788,-0.22263 l -15.92009,-0.66648 c 0,1.33295 -1.57011,1.72236 -1.57011,3.05598 0,1.66723 0,3.33375 0,5.00098 0,3.66665 2.24262,5.49995 2.24262,9.1673 0,3.33375 -2.24262,4.88932 -2.24262,8.2224 0,0.5732 0.099,1.0797 0.25003,1.54941 l 0,0 c -2.12988,-1.88913 -2.82829,-2.60393 -5.40672,-3.88243 -1.4011,-0.66718 -2.24252,-1.05523 -3.58739,-1.77819 -1.34544,-0.72164 -2.01865,-1.77819 -3.58796,-1.77819 -1.23281,0 -1.62494,1.16755 -2.46641,2.00014 -1.34544,1.33362 -2.52205,2.11172 -4.48428,2.22271 -1.12095,0.0559 -1.79397,0.22261 -2.91495,0.22261 -0.3365,0 -0.61679,-0.27776 -0.89708,-0.22261 -2.07349,0.50036 -1.84961,3.7783 -4.0365,3.7783 -1.28846,0 -2.07349,-0.72163 -3.13884,-1.33363 -2.52205,-1.55559 -3.58718,-2.94436 -5.60582,-5.11125 -1.737,-1.88916 -3.0268,-2.94436 -4.70815,-4.88932 -0.78504,-0.88911 -1.17739,-1.66723 -1.79419,-2.6673 -0.16669,-0.27707 0,-0.72161 -0.22388,-0.88906 -0.22446,-0.1662 -0.6168,0.056 -0.89689,0 -1.40127,-0.38874 -2.24252,-0.22195 -3.7,-0.22195 0,-1.50041 -0.56038,-2.27788 -0.56038,-3.7783 l 0,0 c 0.16863,-0.61198 0.67242,-1.55624 0.67242,-2.22271 0,-2.11109 -0.67242,-3.33376 -0.67242,-5.44483 0,-0.72299 -0.16864,-1.22269 0,-1.88916 0.16863,-0.83394 1.40183,-0.77814 1.79396,-1.55625 0.67244,-1.33295 1.06515,-2.11107 1.34546,-3.55566 0.55981,-2.66728 0.1124,-4.33382 0.44775,-7.11207 0.11243,-1.11102 0.61758,-1.72304 1.12175,-2.66657 0.95332,-1.66722 1.96224,-2.83409 3.81108,-3.33377 2.18689,-0.612 3.64437,-0.83394 5.38213,-2.22272 0.33573,-0.22195 0.72866,-0.33358 0.8969,-0.66648 1.45688,-2.44465 0.78446,-4.39031 1.56951,-7.11204 0.0563,-0.27842 -0.16671,-0.66715 0,-0.88909 0.67241,-0.77744 1.73756,-0.22262 2.69029,-0.66716 1.17795,-0.55481 1.12154,-1.88845 1.56932,-3.11113 0.39291,-1.0559 1.06612,-1.66654 1.5701,-2.66661 0.89708,-1.83399 1.51387,-3.05667 2.69047,-4.66737 1.45729,-1.94564 2.46701,-4.00093 4.93339,-4.00093 2.12991,0 3.2509,1.11171 5.38138,1.11171 1.28978,0 2.41077,-0.33358 3.13884,-1.33362 0.33652,-0.50036 0.0562,-1.2785 0.44854,-1.77818 0.61738,-0.83326 1.62631,-0.94491 2.69089,-1.11102 1.34562,-0.27845 2.24251,0 3.58736,-0.22195 1.45747,-0.22261 2.24253,-0.66715 3.58737,-1.33364 l 39.24011,-24.89179 20.40427,0 2.6905,0.88907 0,0 z">
<desc
id="desc5751">Burkina Faso</desc>
<title
id="title5749">Burkina Faso</title>
</path>
这些只是整个非洲的2个国家。我想使用onclick事件并通过id或国家名称将其链接到国家，而不是必须将Xlink放在每个路径上。此活动将打开国家/地区所在的页面。
由于
答案 0 :(得分：0)
要获取发生点击的国家/地区，您可以将点击事件绑定到路径标记，然后在事件中读取标签（因为它包含国家/地区名称）。这是演示代码。
$(function(){
$('body').on('click','path',function(){ // this is event delegation which will trigger on any path clicked inside the html Body tag.
alert('The clicked Country Name is : '+ $(this).attr('label'));
//here I am extracting the name from label, you can extract from any element like from <desc> or <title> in your example
});
$('path').trigger('click'); //just trigerring a click for you :)
});
同样在你的HTML remove the onclick attribute中它的旧式绑定脚本。
如果您只想将事件绑定到特定地图，那么您可以在选择器中提供更多详细信息，并仅定位所需的元素，如下所示
$('#MyMapId').on('click','path',function() {} );
// this works even if the paths are built later into the HTML and are not available at the time of execution of the script.
或者如果您知道在执行脚本时路径可用，您可以这样做。
$('#MyMapId path').on('click',function(){});
// this works only if the path element is available at the time of execution of this script
这是一个working fiddle。如果您需要帮助，请告诉我