Svg map onclick, чтобы открыть соответствующий url

Question

У меня есть 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> 

Это только две страны из всей Африки. Я хотел бы использовать событие onclick и связывать его со страной с именем id или country, вместо того, чтобы поместить Xlink по каждому пути. Это событие откроет страницу, на которой отображается карта стран.

Благодаря

Answer 1

Чтобы получить страну, на которой нажмите произошло, вы можете связать событие щелчка на пути тега, а затем в случае читать этикетку (поскольку она содержит название страны). Вот демонстрационный код.

$(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. дайте мне знать, если вам нужна помощь