Svg map onclick to open related url

Question

I have a svg map of Africa. If I click on a country, I want to be able to open another svg or page that has a map of that country. I have the svg images. I tried the following:

<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> 

These are only 2 countries out of the whole of Africa. I would like to use the onclick event and link it to the country via the id or country name, rather than having to put the Xlink around every path. This event will open the page where the countries map is.

Thanks

Answer 1

To get the country on which the click has happened, you can bind a click event to the path tag and then in the event read the label (as it contains the country name). Here is the demo code.

$(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 :)
});

Also in your HTML remove the onclick attribute its old style of binding scripts.

If you want to bind the events only to a specific map then you can give more details in the selector and target only the required elements , something like below

   $('#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.

Or If you know that the path is available when executing the script you can do.

 $('#MyMapId path').on('click',function(){});
 // this works only if the path element is available at the time of execution of this script

And here is a working fiddle. let me know if you need help