所以我有一个带有标记位置和多边形的SVG地图。使用CSS，区域比地图的其他区域更亮，并且在悬停时它们的颜色不同。到目前为止还没有JS代码。
现在我想创建一个带有文本的悬停窗口（Tooltip？），只要鼠标在某个区域上方，我希望该窗口显示悬停在地图的正确区域上。
最简单的方法是什么？ 这是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>
答案 0 :(得分：3)
创建一个title元素，它是每个多边形的子元素，例如
<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>