弹出窗口通过SVG地图悬停或点击

时间:2016-10-27 03:52:42

标签: svg

请参阅下面的更新

我正在尝试按县编码加州的互动地图。当用户在县内徘徊或点击(我还没有确定)时,会出现工具提示或弹出窗口,其中包含该县特定的数据。

我正在使用我在维基百科上找到的内联SVG文件:Map of California by County

每个“折线”代表一个县并且有一个id(例如id =“_ x30_01_Alameda”)。有没有办法对xml进行编码,以指定在悬停时点击或在点击该ID时触发的事件?

显然,我还没有和SVG合作过多。是否有更好的方法来按县创建交互式地图?

以下是我要修改的代码示例。我已经在“县动画”的'折线'元素中添加了类,现在我只想弄清楚如何在悬停时为每个县添加一个包含特定信息的弹出窗口:

更新

所以我在折线内添加了标题“Hello World”,所以现在当用户将鼠标悬停在特定的县上时,工具提示会出现。有关如何使用工具提示的任何建议直接显示在每个县吗?只能用CSS和绝对定位来完成吗?如果是这样,那听起来像是一场噩梦。

感谢您的帮助!

    <script>

  $( function() {
    $( document ).tooltip();
  } );

</script>


    </head>
    <body>

        <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
        <svg width="620.843px" height="733.026px">

    <defs id="defs1051">
        <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 366.513 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="620.84302 : 366.513 : 1" inkscape:persp3d-origin="310.42151 : 244.342 : 1" id="perspective1055" />
    </defs>

        <polyline  class="county animate" id="_x30_01_Alameda" title="Hello World" fill="#ffffff" stroke="#979899" stroke-miterlimit="1" points="160.354,327.507 160.446,327.867     160.371,329.095 160.464,329.46 160.166,329.92 160.457,331.061 160.097,331.152 160.188,331.512 160.38,332.262 160.186,333.111     160.278,333.471 160.37,333.831 160.028,335.516 160.221,336.271 160.136,339.068 159.954,341.485 159.972,343.079     160.154,345.402 159.98,346.24 160.071,348.205 159.803,348.656 160.262,348.954 160.354,349.314 160.445,349.674     160.831,349.576 161.679,349.776 161.771,350.136 162.136,350.042 162.984,350.243 163.343,350.151 163.435,350.51     163.075,350.602 163.168,350.967 163.528,350.875 163.626,351.261 163.36,351.718 163.817,352.011 164.208,351.912 164.3,352.277     164.66,352.186 164.752,352.545 164.85,352.93 165.214,352.837 164.67,353.786 142.229,352.752 140.756,353.128 140.847,353.487     140.462,353.585 140.562,353.975 140.197,354.068 140.098,353.678 139.713,353.777 139.812,354.167 137.955,354.64 138.046,355     137.682,355.093 137.59,354.733 137.23,354.825 137.131,354.435 136.741,354.534 136.65,354.174 136.55,353.784 136.19,353.875     136.29,354.266 134.791,354.648 132.941,353.521 130.886,353.246 130.125,351.869 129.093,350.95 128.734,351.042     127.886,350.846 126.669,347.599 125.157,344.793 124.671,341.364 124.847,338.923 123.34,336.143 122.24,334.852     121.002,334.757 120.81,334.002 119.903,333.466 120.167,332.982 120.076,332.623 121.667,332.601 121.934,332.149     121.475,331.851 117.911,330.394 114.947,329.551 114.473,327.691 114.913,326.391 116.222,325.264 116.396,324.448     116.403,322.847 116.02,321.347 115.447,320.726 115.348,320.336 115.737,320.236 116.097,320.145 116.482,320.047     116.582,320.437 116.946,320.344 117.305,320.252 117.206,319.862 117.596,319.763 117.956,319.671 118.055,320.061     118.445,319.961 118.537,320.322 118.628,320.682 118.988,320.59 119.087,320.981 119.179,321.34 119.278,321.73 119.643,321.638     120.027,321.54 120.119,321.9 120.484,321.807 120.576,322.167 121.06,322.459 121.152,322.824 120.769,322.922 120.958,323.667     121.343,323.569 121.436,323.935 121.801,323.842 121.9,324.231 121.991,324.586 122.09,324.977 122.449,324.886 122.541,325.246     122.926,325.147 123.019,325.513 122.634,325.611 122.732,325.996 122.825,326.361 122.923,326.746 123.309,326.648     123.401,327.013 123.766,326.92 124.515,326.729 124.971,326.996 125.071,327.387 125.163,327.747 125.548,327.648     125.647,328.039 126.007,327.948 126.842,328.118 127.207,328.025 127.597,327.925 128.433,328.095 128.797,328.002     129.646,328.202 130.099,328.476 130.849,328.285 131.403,328.937 131.787,328.838 131.879,329.199 132.344,329.496     132.819,329.757 133.462,330.777 133.926,331.074 132.911,331.722 133.101,332.466 133.678,333.125 134.037,333.033     134.129,333.393 134.591,333.685 134.977,333.586 135.07,333.952 135.434,333.859 136.009,334.506 146.778,331.762     148.537,330.902 157.833,328.533 157.741,328.173 160.354,327.507   "  />

0 个答案:

没有答案