鼠标悬停时的 SVG 工具提示

SVG tooltip on mouse hover?

本文关键字:SVG 工具提示 悬停 鼠标      更新时间:2023-09-26

所以我有一个带有标记位置和多边形的SVG地图。使用 CSS,这些区域比地图的其余部分更亮,并且在悬停时,它们的颜色也不同。到目前为止,根本没有JS代码。

现在,我想创建一个悬停窗口,每当鼠标悬停在某个区域上时

,我都会使用文本(工具提示?),并且我希望该窗口悬停在地图的正确区域上。

最简单的方法是什么?这是SVG地图: http://jsfiddle.net/4wx8v817/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
            <g id="Layer_1">
            <g id="Map_2_">
            <g id="Map">
            <image overflow="visible" enable-background="new    " width="1600" height="1175" id="Map_1_" xlink:href="http://1.bp.blogspot.com/_SniTwfm5BwE/TD5ntu8-F8I/AAAAAAAACnY/LaZH__Hvn3M/s1600/Wheel+of+Time+Map+Final.jpg"></image>
            </g>
            </g>
            </g>                
            <g id="Layer_2">
                <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                    1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
                                                    913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
                                                    738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
                                                    727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
                                                    873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   " />
            <polygon id="Cairhien" fill="none" points="1485.5,472 1448.83,566.67 1437.5,587.5 1389.17,597 1353.5,612.33 1310.17,640
                                                       1223.83,661.33 1204.5,661.33 1195.17,673.33 1177,593.67 1182.5,549.33 1198.5,509.67 1221.17,494 1267,472 1305.17,472
                                                       1448.83,458.33   " />
            <polygon id="Saldaea" fill="none" points="1011.5,232.02 1009.83,243.35 1006.83,247.35 987.5,286.68 985.17,303.68 971.83,308.35
                                                      954.17,327.68 915.17,345.02 803.5,422.68 782.5,447.35 733.17,412.35 724.5,396.35 711.83,395.02 657.83,354.68 682.83,337.68
                                                      693.5,295.02 714.5,292.35 728.83,297.68 735.5,303.68 755.17,301.02 752.83,289.68 763.17,285.02 757.83,274.68 763.17,267.02
                                                      771.83,267.02 769.5,260 791.33,253.5 785.5,245.35 785.5,242.02 797.17,237.68 797.17,233.02 810.17,232.02 812.5,227.85
                                                      826.83,227.85 829.83,221.02 882.5,216.35 888.5,221.02 902.17,221.02 902.17,216.35 912.17,218.35 927.83,218.35 931.83,211.68
                                                      943.83,211.68 946.17,221.02 954.17,223.68 971.33,218.35 974.17,223.68 968.5,232.02 971.83,234.02  " />
            <polygon id="Kandor" fill="none" points="1148.17,274.02 1155.17,315.02 1013.83,307.02 997.17,303.68 985.17,303.68 987.5,286.68
                                                     1006.83,247.35 1009.83,243.35 1011.5,232.02 1013.83,225.02 1030.5,221.02 1037.17,232.02 1055.83,230.35 1055.83,226.52
                                                     1060,230.35 1083,230.35 1077.83,225.02 1127.5,218.02 1137.5,225.02 1155.17,225.02  " />
            <polygon id="Arafel" fill="none" points="1313.83,252.35 1311.83,261.68 1299.5,267.5 1273.5,298.68 1229.83,325.68
                                                     1153.17,340.02 1155.17,315.02 1148.17,274.02 1155.17,225.02 1172.17,227.68 1175.5,231.18 1188.5,226.52 1192.5,232.02
                                                     1204.5,230.35 1208.5,221.52 1218.5,226.52 1246.83,226.52 1242.5,232.02 1253.17,234.68 1265.17,240.02 1275.5,238.02
                                                     1284.5,240.02 1305.67,238.02   " />
            <polygon id="Shienar" fill="none" points="1448.84,266.52 1451.17,294.35 1451.17,306.68 1437.5,306.68 1429.84,312.18
                                                      1409.84,309.43 1393.17,310.81 1341.84,334.35 1311.83,337.02 1276.84,340.02 1229.83,325.68 1273.5,298.68 1299.5,267.5
                                                      1311.83,261.68 1313.83,252.35 1312.83,250.59 1334.84,248.35 1366.84,243.02 1382.17,248.35 1404.17,245.68 1429.84,243.02
                                                      1448.84,248.35 1453.5,258.35  " />
            <polygon id="TarValon_1_" fill="none" points="1208.5,478.34 1197,478.34 1180.83,471.68 1171.83,459.68 1171.83,436.34
                                                          1177,431.01 1200,445 1206.5,456.5     " />
            <polygon id="Tear" fill="none" points="1444.5,1000.68 1436.83,1021.35 1427.17,1022.68 1420.17,1028.35 1410.17,1028.35
                                                   1401.83,1022.68 1393.5,1022.68 1383.83,1009.35 1380.83,995.01 1383.83,982.35 1383.83,969.68 1377.83,963.22 1356.83,961.1
                                                   1338.5,965.35 1332.83,952.01 1321.17,952.01 1309.17,941.01 1293.17,952.01 1293.17,955.35 1283.83,963.51 1256.5,963.51
                                                   1248.83,958.68 1170.67,968.35 1168.17,949.01 1173.17,930.35 1189.83,911.68 1222.83,892.01 1269.17,882.01 1332.83,882.01
                                                   1347.67,887.01 1359.17,889.35 1393.5,909.01 1397.67,925.35 1410.17,941.01 1417.67,945.5 1428.83,958.68 1420.17,965.35
                                                   1420.17,976.01 1415.17,982.35 1415.17,986.35 1427.17,990.01 1427.17,995.01   " />
            <polygon id="Illian" fill="none" points="1137.17,979.35 1110.17,988.35 1094.17,986.68 1079.83,996.35 1071.5,1010.35
                                                     1055.5,1010.35 1049.17,1012.68 1058.83,1031 1046.5,1055.35 1036.33,1062.35 1011.5,1057.35 994.17,1028.35 1000.5,991.52
                                                     997.33,979.35 998.92,972.02 981.83,957.35 969.83,952.02 955.5,952.02 945.12,945.5 950.31,934 950.31,925.02 968.5,872.35
                                                     975.83,866.35 975.83,859.35 990.38,859.35 1021.5,850.68 1051.17,877.02 1082.5,903.35 1087.17,903.35 1110.17,935.35     " />
            <polygon id="Altara" fill="none" points="973.6,858.43 972.54,869.05 966.8,874.3 950.31,925.02 942.83,945.5 901.83,945.5
                                                     895.83,941.81 888.12,948.92 888.12,968.01 901.83,980.67 887.09,996 846.5,1000.01 829.83,1011.01 809.83,1002.67 796.5,1021.34
                                                     778.83,1024.01 774.17,1015.01 765.17,1009.34 769.67,992.01 769.67,988.34 778.83,976.67 807.83,958.47 813.83,934 824.5,905.01
                                                     819.17,863.74 848.5,829.34 846.5,792.01 829.94,775.67 807.5,765.33 789.8,744.1 765.83,702 742.39,684.65 720,655.25
                                                     742.39,660.83 779.25,678.5 819.48,690.81 840.41,695.13 853.75,702 870.88,712.12 883.59,715 895.83,715 910.75,722.25
                                                     913.25,737.75 959.46,728.54 942.83,770.67 939.83,805.34    " />
            <polygon id="Amadicia" fill="none" points="824.5,905.01 813.83,934 807.83,958.47 756.5,915.01 696.17,912.34 684,907.67
                                                       634.17,901.67 623.5,894.67 619.5,884.34 628.83,873.67 640.17,864.01 668.83,853.34 691.5,795.5 723.5,791.34 735.17,784
                                                       751.17,784 771.5,803.67 796.5,820.34 802.5,843.01 814.17,859.5 819.17,863.74     " />
            <polygon id="Tarabon" fill="none" points="691.5,795.5 668.83,853.34 640.17,864.01 619.5,884.34 620.71,887.46 605.17,887.46
                                                      583.5,881 536.5,858.67 465.67,821.34 439.42,813.34 437.83,803 441,795.5 448.83,792.67 454.17,786 452.5,786 448.83,781
                                                      443.17,786 432.5,784 427.5,769.67 443.17,752.67 444.83,745.33 458.5,724.34 461.5,705.34 469.83,698.34 484.5,681.34
                                                      550.5,686.34 589.83,688 605.17,689.67 625.17,693.67 633.83,698.34 648.5,719 652.17,720.67 677.5,740.67 690,750    " />
            <polygon id="AradDoman" fill="none" points="697.17,512.75 690,555.01 666.17,565.35 629.5,549.35 599,545.01 572.17,533.88
                                                        546.17,535.01 505.83,541.35 480.5,539.35 489.5,530.68 486.17,473 474.83,473 465.5,478.01 449.83,476.35 445.83,464.35
                                                        449.83,451.25 461.5,447.35 474.83,437.01 478.83,437.01 493.5,429.35 505.83,420.68 513.5,423.01 535.17,407.68 557.17,429.35
                                                        592.17,450 605.83,452.51 617.83,455.01 637.83,455.01 646.5,450 666.17,447.35 685.83,458.01 682.17,474.35    " />
            <rect id="AielWaste" x="1511.5" y="237" fill="none" width="32" height="708.5" />
            <polygon id="Termalking" fill="none" points="296.25,1073.5 296.25,1081.88 275.5,1084 271.5,1081.62 265.25,1084 224,1079.75
                                                         216.5,1085.75 212.25,1085.75 203,1091.5 196.25,1091.5 179.75,1097.5 173.75,1093.25 171,1093.25 166.75,1085.75 159.5,1085.75
                                                         153,1077.5 146.75,1077.5 128,1063 130.5,1055.12 128,1047.44 133.12,1042 130.5,1033.75 135.75,1026 137.38,1019 145.5,1011.5
                                                         145.5,1003.88 148.31,999.75 146.75,991 149.88,989 158.25,989 173.75,1005.25 179.75,1003.88 188,1009.5 192.25,1008
                                                         212.25,999.75 220.25,1001 220.25,1009.5 214.38,1016.75 199.62,1021.25 192.25,1033.75 195,1037.38 193.5,1045.12 189.5,1049.75
                                                         195,1060.5 203,1060.5 214.38,1067.25 233,1052.5 226.75,1042 220.25,1040.5 222.75,1027 224,1027 244.62,1028 250.5,1026
                                                         253.5,1030 268.38,1034.25 281.75,1030 287.25,1034.25 285.88,1040.5 290.75,1049.75 283.75,1058 283.75,1063 290.75,1067.25   " />
            </g>
                <g id="Capitals_1_">
                    <g id="Capitals">
                    <rect id="BandarEban" x="454" y="450" fill="none" width="23" height="23" />
                    <rect id="Falme" x="385.5" y="623.5" fill="none" width="23" height="21" />
                    <rect id="Tanchico" x="429.5" y="761" fill="none" width="23" height="23" />
                    <rect id="Amador" x="664" y="859.5" fill="none" width="20" height="23" />
                    <rect id="EbouDar" x="771.5" y="996" fill="none" width="23" height="23" />
                    <rect id="Jehannah" x="721.5" y="727" fill="none" width="23" height="23" />
                    <rect id="Lugard" x="968.5" y="772.5" fill="none" width="23" height="23" />
                    <rect id="Illiancity" x="1020" y="1031" fill="none" width="23" height="23" />
                    <rect id="Tearcity" x="1209.5" y="922.5" fill="none" width="23" height="23" />
                    <rect id="Mayene" x="1446.5" y="1007.5" fill="none" width="23" height="23" />
                    <rect id="FarMadding" x="1119" y="801.5" fill="none" width="23" height="23" />
                    <rect id="Caemlyn" x="1098" y="678" fill="none" width="23" height="23" />
                    <rect id="Cairhiencity" x="1252" y="546" fill="none" width="23" height="23" />
                    <rect id="TarValon" x="1177" y="445" fill="none" width="23" height="23" />
                    <rect id="Maradon" x="871" y="253.5" fill="none" width="23" height="23" />
                    <rect id="Chachin" x="1060" y="260" fill="none" width="23" height="23" />
                    <rect id="SholArbela" x="1197" y="260" fill="none" width="23" height="23" />
                    <rect id="FalMoran" x="1338.5" y="267.5" fill="none" width="20" height="20.5" />
                    </g>
                </g>
            </svg>

创建一个标题元素,该元素是每个多边形的子元素,例如

                <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                    1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
                                                    913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
                                                    738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
                                                    727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
                                                    873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   ">
                                                        <title>Andor</title></polygon>

如果你想要回车,你可以把它们写成

<title>line 1
line 2
line 3
</title>