带有交互式 CSS 的 Adobe Illustrator SVG 地图答案

【问题标题】：Adobe Illustrator SVG map with interactive CSS带有交互式 CSS 的 Adobe Illustrator SVG 地图
【发布时间】：2015-05-10 14:40:02
【问题描述】：

我一直在使用 Adobe Illustrator 创建具有不同图层的地图： 1. 地图 - 这基本上是一个包含 map.jpg 的背景图像。 2. 边界——这一层定义了不同区域的边界。 3. Locations - 这个图层有一些矩形，我稍后想将它们用作地图上点的锚点。

我已将Leaeflet javeacript 和 CSS 文件添加到我的资源中。我认为这很容易 - 我将文件保存为 SVG，单击代码按钮并希望将代码添加到我的 HTML 页面，然后将 CSS 命令用于“悬停”事件（第 2 层中的每个边框都有一个 id）。 .. 除了它根本不起作用。我将代码放在我的页面上，它呈现为一个完全模糊的图像，甚至与我在 Illustrator 中制作的图像都不接近。

代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1600px"
     height="1175px" 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="../../../../../../Nimrod/OneDrive/Pictures/WoT/Wheel of Time Map Final.jpg" >
            </image>
        </g>
    </g>
</g>
<g id="Borders_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   "/>
    <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     "/>
</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>

这是它的渲染方式：任何想法为什么会发生这种情况？

【问题讨论】：

图像有多大？...演示会很有用。
@Paulie_D 如何制作演示？
像这样 - jsfiddle.net/7tdbrpuf/1 我使用的图像大小与您在 SVG 中列出的尺寸相同，但我想知道您是否也这样做了。
@Paulie_D 我希望这是您想要的：jsfiddle.net/96wypfum/1 注意：我已经粘贴了 Leaflet 文件中的 CSS 和 JS，这些文件是开源的，而不是我自己的。

标签： css html svg adobe

【解决方案1】：

我怀疑这里的问题是实际图像。您没有包含正确的链接，因此无法正确显示。

我认为它试图做的是向您显示 1600x1175 的“缺失图像图标”，因此它被大量放大了。

我通过谷歌搜索找到了这张图片，并将其包含在示例中。

当然，您应该确保您有权使用此图像并将其托管在您自己的服务器上，而不是像我在这里所做的那样进行热链接。

#Arafel {
  fill: rgba(255, 0, 0, 0.2);
}
#Kandor {
  fill: rgba(255, 255, 255, 0.55);
}

<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="Borders_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   " />
    <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     " />
  </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>

我还从 SVG 代码中删除了 SVG 尺寸，因此它现在具有响应性。

【讨论】：

太棒了！但是你把 CSS 代码放在哪里呢？我尝试使用 :hover 命令将它放在外部 CSS 文件中，但它不起作用...
另外——这是 SVG，所以我把整个东西放在一个较小的
中应该没有问题吧？它会重新调整它吗？
好吧，我不知道为什么，但是 :hover 功能对我不起作用。 “填充”功能完美运行，但我添加的那一刻 :hover 它停止工作...jsfiddle.net/ha66jdga
哦，关于权利-这是一个学校项目，它将被上传到一个封闭的大学服务器，并在评分后删除。它不用于任何形式的公共用途。
在这里找到 :hover 问题的答案：stackoverflow.com/questions/9208244/… 至此本章结束！谢谢@Paulie_D Paulie_D！你太棒了。