鼠标悬停时的SVG工具提示？
Posted
技术标签:
【中文标题】鼠标悬停时的SVG工具提示？【英文标题】：SVG tooltip on mouse hover? 【发布时间】：2015-05-11 05:43:09 【问题描述】：所以我有一个带有标记位置和多边形的 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 " 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" />
<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" />
<rect id="Falme" x="385.5" y="623.5" fill="none" />
<rect id="Tanchico" x="429.5" y="761" fill="none" />
<rect id="Amador" x="664" y="859.5" fill="none" />
<rect id="EbouDar" x="771.5" y="996" fill="none" />
<rect id="Jehannah" x="721.5" y="727" fill="none" />
<rect id="Lugard" x="968.5" y="772.5" fill="none" />
<rect id="Illiancity" x="1020" y="1031" fill="none" />
<rect id="Tearcity" x="1209.5" y="922.5" fill="none" />
<rect id="Mayene" x="1446.5" y="1007.5" fill="none" />
<rect id="FarMadding" x="1119" y="801.5" fill="none" />
<rect id="Caemlyn" x="1098" y="678" fill="none" />
<rect id="Cairhiencity" x="1252" y="546" fill="none" />
<rect id="TarValon" x="1177" y="445" fill="none" />
<rect id="Maradon" x="871" y="253.5" fill="none" />
<rect id="Chachin" x="1060" y="260" fill="none" />
<rect id="SholArbela" x="1197" y="260" fill="none" />
<rect id="FalMoran" x="1338.5" y="267.5" fill="none" />
</g>
</g>
</svg>
【问题讨论】：
好书！我现在正在读那个系列：P @Mottie 这是真的，但它并没有真正回答我的问题：P 我在下面的答案中添加了一条评论，希望能回答您的问题；基本上你不能用纯 css 添加样式工具提示。 【参考方案1】：创建一个标题元素，它是每个多边形的子元素，例如
<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>
【讨论】：
那很好，但是我的文字比一个小标题要长一点。我将和
放在标题标签内，但它只是将整个文本显示在一行中，而不是将它们放在不同的行和样式中。
换句话说，我如何设置它的样式？我通过我的 CSS 页面放置了样式命令，但没有成功。 你不能使用 css 来设置它的样式；我什至尝试使用伪元素，但 won't work either。但您可以使用工具提示插件 - 请参阅 this answer。 @Mottie 这只是一个很棒的插件！我喜欢它！非常感谢！ （也是我发现的第一个实际工作并且非常容易设置的插件！）以上是关于鼠标悬停时的SVG工具提示？的主要内容，如果未能解决你的问题，请参考以下文章