Javascript Svg映射单击打开相关url

Javascript Svg映射单击打开相关url,javascript,jquery,dictionary,svg,xlink,Javascript,Jquery,Dictionary,Svg,Xlink,我有一张非洲的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.400

我有一张非洲的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> 

土地
{
剪辑规则:偶数;填充:#fefee4;填充不透明度:1;填充规则:非零;笔划:#000000;笔划宽度:0.40000001;笔划斜接限制:4;笔划dasharray:无;笔划不透明度:1;图像渲染:优化质量;形状渲染:几何精度;文本渲染:几何精度;
}           
路径:悬停
{
剪辑规则:偶数;填充:#ff9177;填充不透明度:2;填充规则:非零;笔划:#000000;笔划宽度:0.40000001;笔划斜接限制:4;笔划dasharray:无;笔划不透明度:1;图像渲染:优化质量;形状渲染:几何精度;文本渲染:几何精度;
}   
布基纳法索
布基纳法索
这是整个非洲仅有的两个国家。我想使用onclick事件并通过id或国家名称将其链接到国家,而不必在每条路径上放置Xlink。此事件将打开国家地图所在的页面


感谢

要获取发生单击的国家/地区,您可以将单击事件绑定到路径标记,然后在事件中读取标签(因为它包含国家/地区名称)。这是演示代码

$(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 :)
});
或者,如果在执行脚本时知道路径可用,则可以执行以下操作

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

这是一个例子。如果您需要帮助,请告诉我您的代码有什么问题?发生了什么,没有发生什么?xlink部件的工作原理与第一个国家(马里)相同。我更希望使用onclick事件根据单击的国家生成url。我不太知道如何在java或jquery(学习)中做到这一点。布基纳法索单击事件中的警报不起作用。还是我在马里比赛中使用的方法是最好的方法?
 $('#MyMapId path').on('click',function(){});
 // this works only if the path element is available at the time of execution of this script