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.
Related
I'm dealing with some messy SVG code and have an issue with displaying icons on a product page.
This is how the icon should look:
Here is how it gets displayed with the drops missing (link to product page):
I inspected the code in the browser, and tried different things like setting the elements fill to a specific color etc. But even in the dev tools I wasn't able to set the color of the element in the dev tools with e.g. element.style{fill: red!important;}. I don't understand, where it gets overwritten.
I'd be grateful if someone can point me to the right direction.
Just need to display:none; or remove/comment of 2nd <g> inside <g id="Illu">. Attached screenshot will help you more.
Updated code of <g id="Illu"> :-
<g id="Illu">
<g>
<defs>
<rect id="SVGID_1_" x="2.8" y="2.8" width="70.9" height="70.9"></rect>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"></use>
</clipPath>
<path class="st1" d="M38.3,72.7c19,0,34.4-15.4,34.4-34.4c0-19-15.4-34.4-34.4-34.4S3.8,19.3,3.8,38.3
C3.8,57.3,19.3,72.7,38.3,72.7z"></path>
<path class="st2" d="M19.3,37.3c3.6,0,6.6-2.9,6.6-6.6c0-3.6-5-9.5-6.6-13.9c-1.6,4.4-6.6,10.3-6.6,13.9
C12.8,34.3,15.7,37.3,19.3,37.3z"></path>
<path class="st2" d="M33.7,43.6c2.6,0,4.7-2.1,4.7-4.7s-3.5-6.8-4.7-9.9c-1.1,3.1-4.7,7.3-4.7,9.9S31.2,43.6,33.7,43.6z"></path>
</g>
<!-- <g>
<defs>
<rect id="SVGID_3_" x="2.8" y="2.8" width="70.9" height="70.9"></rect>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"></use>
</clipPath>
<path class="st3" d="M38.3,72.7c19,0,34.4-15.4,34.4-34.4c0-19-15.4-34.4-34.4-34.4S3.8,19.3,3.8,38.3
C3.8,57.3,19.3,72.7,38.3,72.7z"></path>
</g>-->
<rect x="2.8" y="2.8" class="st4" width="70.9" height="70.9"></rect>
<g>
<path d="M12.5,61.1c0.6,0.7,1.3,1.4,1.9,2h47.7c0.7-0.6,1.3-1.3,1.9-2H12.5z"></path>
<path d="M57.5,66.8c0.9-0.6,1.8-1.3,2.7-2H16.3c0.9,0.7,1.7,1.4,2.7,2H57.5z"></path>
<path d="M57.7,23.3V35h2V23.3c-0.3,0-0.7,0.1-1,0.1S58.1,23.3,57.7,23.3z"></path>
<path d="M46.3,9.5h-12v2h11.9c0-0.2,0-0.5,0-0.7C46.2,10.4,46.2,10,46.3,9.5z"></path>
<path d="M49.1,18.8l-8.8,8.8l1.4,1.4l8.8-8.8C50,19.8,49.5,19.3,49.1,18.8z"></path>
<path d="M58.7,21.4c-5.8,0-10.5-4.7-10.5-10.5c0-1.8,0.5-3.6,1.3-5.1c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7,1.4-1.2,2.8-1.3,4.4
c0,0.4-0.1,0.9-0.1,1.3c0,0.2,0,0.5,0,0.7c0.2,2.7,1.2,5.3,2.8,7.3c0.4,0.5,0.9,1,1.4,1.4c2,1.7,4.5,2.9,7.3,3.1
c0.3,0,0.7,0.1,1,0.1s0.7,0,1-0.1c3-0.2,5.6-1.5,7.6-3.4c-0.4-0.6-0.7-1.1-1.1-1.7C64.3,20.1,61.7,21.4,58.7,21.4z"></path>
</g>
<line class="st5" x1="65.8" y1="58.3" x2="10.4" y2="58.3"></line>
</g>
Here is the svg of the icon:
<?xml version="1.0"?>
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>.cls-1{fill:#4d91bb;}.cls-2{fill:#2175aa;}.cls-3{fill:#c3edf5;}.cls-4{fill:#7ad0cb;}.cls-5{fill:#4dbab4;}</style>
</defs>
<title />
<g data-name="23 Page Rank Badge" id="_23_Page_Rank_Badge">
<path class="cls-1" d="M43.22,61,64,73,40,114.53,35.65,98.07l-16.43,4.46Zm41.57,0L64,73l24,41.57,4.35-16.46,16.43,4.46Z" />
<polygon class="cls-2" points="39.48 67.43 39.48 81.48 55.02 81.48 57.59 84.06 64 72.97 43.22 60.97 39.48 67.43" />
<polygon class="cls-2" points="92.52 74.36 84.78 60.97 64 72.97 71.87 86.6 76.98 81.48 92.52 81.48 92.52 74.36" />
<rect class="cls-3" height="53.03" width="53.03" x="37.48" y="24.45" />
<rect class="cls-3" height="53.03" transform="translate(54.78 -30.33) rotate(45)" width="53.03" x="37.48" y="24.45" />
<circle class="cls-4" cx="64" cy="50.97" r="15" />
<path class="cls-5" d="M52.74,51A15,15,0,0,1,65.87,36.09a15,15,0,1,0,0,29.74A15,15,0,0,1,52.74,51Z" />
</g>
</svg>
Here's the component I made but it's not showing the icon :(
const RankSVG = ({
width = "53" ,
height = "53" ,
viewBox="0 0 128 128" ,
}) => {
return(
<>
<svg viewBox={viewBox} xmlns="http://www.w3.org/2000/svg">
<style>{`.cls-1{fill:#4d91bb}.cls-2{fill:#2175aa}.cls-3{fill:#c3edf5}.cls-4{fill:#7ad0cb}.cls-5{fill:#4dbab4}`}</style>
<path className="cls-1" d="M43.22,61,64,73,40,114.53,35.65,98.07l-16.43,4.46Zm41.57,0L64,73l24,41.57,4.35-16.46,16.43,4.46Z" /><polygon className="cls-2" points="39.48 67.43 39.48 81.48 55.02 81.48 57.59 84.06 64 72.97 43.22 60.97 39.48 67.43" /><polygon className="cls-2" points="92.52 74.36 84.78 60.97 64 72.97 71.87 86.6 76.98 81.48 92.52 81.48 92.52 74.36" /><rect className="cls-3" height={height} width={width} x="37.48" y="24.45" /><rect className="cls-3" height={height} transform="translate(54.78 -30.33) rotate(45)" width={width} x="37.48" y="24.45" /><circle className="cls-4" cx="64" cy="50.97" r="15" /><path className="cls-5" d="M52.74,51A15,15,0,0,1,65.87,36.09a15,15,0,1,0,0,29.74A15,15,0,0,1,52.74,51Z" /></svg>
</>
);
}
What am I doing wrong here? if I want to include such svgs in future, what points should I remember to avoid making mistakes?
You have to move your styles out of to .jsx file into your .css file. The curly braces {} that separate classes interfere with .jsx {} which are intended for expressions.
Here's a working sample: https://codesandbox.io/s/718w386v46
Now, alternatively, you could keep your styles in the .jsx file but then you have to define them as object literals with an additional set of curly braces inside the curly braces that are intended for expressions.
I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>
In Firefox, when I open the SVG document, it simply shows a very thin (not 5 wide) vertical line. In Chrome, it doesn't show anything (nor does it in codepen, here: https://codepen.io/jwir3/pen/BJBqEK ).
I'm not quite sure what I'm doing incorrectly here, but it has something to do with the filter, because, if I remove the filter: url(#dropShadow) from the path definition, the line shows up as expected.
You can't use objectBoundingBox units if your shape has no height or width.
Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.
The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<title>Line Drop Shadow</title>
<description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
<defs>
<filter id="dropShadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>
When processing filters, different browsers process in different stroke.
Chrome considers stroke as a value with a zero pixel, so it does not include it in the filter region.
Therefore, to make the result look the same in different browsers, it is better to replace path with stroke-width ="5", a rectangle with a width of 5px withoutstroke (stroke="none")
In addition, the default values for the filter area are: x =" - 10% "" y = "- 10%" `` width = "120%" `` height = "120%"- large blur sizes are usually truncated .
By default, filterUnits = "objectBoundingBox" and therefore the values are specified in percentages.
To make it easier to calculate the size of the filter region action, specify the value offilterUnits = "userSpaceOnUse" and then you can specify all dimensions for thefilter region` in pixels.
<svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropShadow" filterUnits = "userSpaceOnUse" x="4" y="0" width="12" height="472">
<feDropShadow dx="6" dy="4" stdDeviation="3"></feDropShadow>
</filter>
</defs>
<g id="Artboard" fill="#FF0000" filter="url(#dropShadow)" >
<!-- <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1" stroke-width="5" ></path>-->
<rect x="5" y="5" width="5" stroke="none" height="463" />
</g>
</svg>
Swapping to userSpaceOnUse is the correct answer in most circumstances but has the following limitations:
The filter effects region will apply from -10% to 120% of the canvas, rather than the bounding box of the element (using more memory and processing time)
For large dynamic SVGs (such as created by d3) it can be hard to calculate the required filter x/y/width/height to ensure the filter applies to all elements.
An alternate (less elegant) solution is to apply the filter to a <g> and use a hidden node within this to give the group the correct width or height:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" width="20">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" style="filter: url(#dropShadow)">
<circle r="5" cx="0" cy="0" visibility="hidden"></circle>
<path d="M10,10 L10,100" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round"></path>
</g>
</svg>
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 :)
I want to create a SVG path with several points and several bezier curves. If I add a bezier curve the SVG is not rendered. How can I have several bezier curves?
SVG
<polyline points="0,50 Q0,20 101,40 404,50"
stroke="black"
stroke-width="3" fill="none">
</polyline >
If you want to draw a beziere curve you need to use the <path> element. So your example would become:
<path d="M0,50 Q0,20 101,40"
stroke="black"
stroke-width="3" fill="none">
</path>
Now, if you wanted to add more connected curves you would write:
<path d="M0,50 Q0,20 101,40 Q100,0 120,40"
stroke="black"
stroke-width="3" fill="none">
</path>
Try something like this:
<svg height="180" width="500">
<polyline points="0,50 0,20 101,40 404,50" stroke="black" stroke-width="3" fill="none" />
</svg>