I've been using Adobe Illustrator to create a map with different layers:
1. Map - this is basically a background image containing a map.jpg.
2. Borders - this layer defines borders of different regions.
3. Locations - this layer has some rectangles which I later want to use as anchors for points on the map.
I've added the Leaeflet javeacript and CSS files to my resources.
I thought it'll be easy - I saved the file as SVG, clicked the code button and expected to add the code to my HTML page, then use CSS commands for "hover" events (each border in layer 2 has an id)...
Except it doesn't work at all.
I place the code on my page, and it renders as a completely blurred image, not even close to what I made in Illustrator.
Here is the code:
<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>
And this is how it renders:
Any ideas why this is happening?
The issue here, I suspect, is the actual image. You haven't included a proper link so it won't display properly.
What I think it's trying to do is show you the "missing image icon" at 1600x1175 so it's massively blown up.
I found the image with a google search and have included it into the example.
You should, of course, ensure that you have the rights to use this image and host it on your own server rather than hotlinking as I have done here.
#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>
I've also removed the SVG dimensions from the SVG code so it's now responsive.
iam currently trying to get a pinch to zoom animation done, with two different svg graphics. Is there a way, to transform or blend the first svg image into the second one, without using javascript, and maybe even without css?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="-13 15 100 100" enable-background="new -13 15 100 100" xml:space="preserve">
<g id="Ebene_11">
<path fill="#010202" d="M78.5,93.1l0.8,1.4l-24.3,10l-0.4-1.4c0,0-0.8-2.6-3-4.2C49.7,97.4,29.7,81.2,30.2,75
c0.3-3.2-0.8-5.4-1.6-7c-0.7-1.3-1.3-2.5-0.7-3.7c0.4-0.9,1.3-1.5,2.6-1.7c1.8-0.3,4.8,0.3,6.8,2.5c1.7,1.8,2.8,4.8,3.9,7.7
c0.2,0.5,0.6,1.4,1,1.8c2.4,2.9,4.2,2.6,6,0.8c1.9-1.9,1.6-13.6-0.8-15c-1.8-1-4-1-6.8-1.9c-2.9-0.9-6.1-1.7-5.9-5.2
c0.3-1.6,0.7-2.4,2.8-3.2c4.7-1.8,14.9-2.2,19.5,2.5c1.2,1.2,2.2,1.8,2.8,3.1c0.7-0.4,2.3-1.1,3.4-1.1c3.8,0,14.4,16.8,14.5,16.9
c1.4,2.6-0.3,12.5-0.9,15.5C76.5,89.1,78.5,93.1,78.5,93.1z M56.6,100.9l18.8-7.8c-0.7-1.6-1.7-4.3-1.2-6.6
c1.1-5.7,1.8-12.5,1.2-13.7c-1.7-3.1-10.1-14.7-12.2-15.5c-0.8,0-1.3,0.4-1.6,0.6c0.4,1.2,0.6,2.4,0.9,3.4c0.3,1.4,0.6,2.6,1,3.6
c0.3,0.7,0,1.5-0.7,1.8c-0.7,0.3-1.5,0-1.8-0.7c-0.6-1.3-0.9-2.7-1.2-4.2c-0.3-1.2-0.5-2.5-1-3.7c0,0,0-0.1-0.1-0.1
c-0.6-1.6-2-2.8-3.4-4.3c-3.7-3.7-12.8-3.3-16.6-1.8c-1.6,0.6-1.7,1.5-1.7,1.7c-0.1,1.1,1,1.6,4.1,2.6c3.2,1,7.8,0.8,9.6,4.6
c0.3,0.6,0.9,3.6,0.9,4.6c0.4,8.3-0.2,10.8-4.3,13.2c-3.1,1.2-7.2-0.9-8.8-5.1c-1-2.6-2-5.4-3.3-6.8C34,65.4,32.3,65,31.3,65
c-0.5,0-0.8,0.1-0.9,0.2c0.1,0.3,0.4,0.9,0.6,1.4c0.9,1.8,2.2,4.5,1.9,8.4c-0.4,4.6,15.3,17.5,20.3,21.4
C55,98,56.6,100.9,56.6,100.9z">
<animate id="animation1"
attributeName="opacity"
from="1" to="0" dur="2s"
style="opacity:0"
repeatCount="1" />
</path>
</g>
<g>
<path style="opacity:0" d="M76.9,87.2c0.5-2.9,2.1-12.7,0.8-15.2c-0.1-0.2-10.6-16.5-14.3-16.5c-0.9,0-1.6,0.2-2.3,0.5c-0.5-2.9-1-6-1.2-8.5
c-0.4-5.3-1.3-8.5-4.9-8.9c-0.5-0.1-1.3,0-2.1,0.7c-2.1,2-3.3,8.3-2.8,16.2c0.6,12.3-1.1,20.5-3.2,21.3c-1.3,0.5-4-2.2-6.1-4.3
c-2.1-2.2-4.3-4.4-6.6-5.4c-2.7-1.1-5.5-0.5-7.1,0.5c-1,0.7-1.6,1.6-1.6,2.6c0,1.3,1,2.1,2.1,3.1c1.3,1.1,3.2,2.6,4.3,5.6
c2.1,5.7,18.3,18.5,20.2,20c2.2,1.6,3,4.1,3,4.1l0.4,1.4l23.7-10l-0.8-1.3C77.9,92.2,76.5,89.2,76.9,87.2z M57.2,100.9
c-0.6-1.2-1.6-2.8-3.4-4.1C49,93,36.1,82.3,34.5,78.1c-1.3-3.7-3.6-5.5-5.1-6.8c-0.4-0.3-0.9-0.8-1.1-1c0.1-0.1,0.3-0.3,0.8-0.5
c0.9-0.4,2.6-0.7,4.2,0c1.8,0.7,3.7,2.8,5.7,4.7c3.1,3.2,6,6.2,9,5c5.6-2.3,5.1-18.9,4.9-24c-0.5-8.9,1.2-13.5,2-14.1
c0.9,0.1,2,0.4,2.4,6.4c0.4,5.9,2.3,15.5,3.9,19.2c0.3,0.7,1.1,1,1.8,0.7c0.7-0.3,1-1.1,0.7-1.8c-0.6-1.3-1.3-3.9-2-6.8
c0.3-0.3,0.8-0.6,1.6-0.7c2.1,0.8,10.3,12,12,15.1c0.6,1.1-0.1,7.8-1.1,13.4c-0.5,2.3,0.5,4.9,1.2,6.5L57.2,100.9z">
<animate id="animation2"
attributeName="opacity"
from="0" to="1" dur="3s"
style="opacity:1"
repeatCount="1" />
</path>
</g>
</svg>
Didnt fount much on the aether about it...thanks in advance
got it
just added this to the first image
<animate id="animation1"
begin="0.8s"
attributeName="opacity"
from="1" to="0" dur="0.5s"
fill="freeze"/>
and this to the second one, and voila the animation is played once and stops then.
<animate id="animation2"
begin="0.8s"
attributeName="opacity"
from="0" to="1" dur="1.3s"
fill="freeze"/>
yay :)