Develop Reference

Svg acting weird in react-natvie

I'm using this library that allows me to use svg files directly in my react-native:
[react-native-svg-transformer][1]
But it isn't working correctly. It renders my svg, but the colors are all wrong.
My <View>'s bg-color is affecting my svg color.
like:
My original svg should look like this:
I downloaded some other svg files, they work just fine!
Here is my svg file:
<svg width="383" height="443" viewBox="0 0 383 443" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g filter="url(#filter0_d)">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="375" height="435">
<path d="M4 0H379V435H4V0Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path d="M379 0H4V276H379V0Z" fill="url(#paint0_linear)"/>
<path d="M379 241H4V812H379V241Z" fill="url(#paint1_linear)"/>
<path d="M173.689 237.491C162.098 240.71 146.09 240.036 128.504 237.176V237.226C73.9305 228.318 4.25799 198.413 4.25799 198.413L4 256.42L128.637 260.232V260.162L173.689 261.54V237.491Z" fill="#18117C"/>
<path d="M4.77394 242.964C4.77394 242.964 52.8546 259.792 108.068 259.603L4 256.42L4.77394 242.964Z" fill="black"/>
<path d="M4.25781 197.565C4.25781 197.565 18.4444 223.43 128.636 237.397C128.636 237.397 43.617 217.947 4.25781 197.565Z" fill="#2D25CE"/>
<path d="M226.721 257.182L225.824 237.868C212.722 247.317 198.71 257.795 198.71 257.795L226.721 257.182" fill="#0D0D63"/>
<path d="M226.794 257.256L379.001 253.501C379.001 253.501 350.348 200.194 299.348 239.554C299.348 239.554 251.785 217.953 239.751 227.049C236.075 229.827 231.114 233.785 225.998 237.942" fill="#0D0D63"/>
<path d="M252.493 280.208C186.435 189.537 130.192 237.74 106.041 267.792L106.062 268.437C98.229 278.189 93.9131 285.839 93.9131 285.839L106.604 285.384L106.607 285.501L252.493 280.208Z" fill="#2D25CE"/>
<path d="M175.037 228.282C144.438 226.725 120.143 249.844 106.224 267.402L106.212 267.621C98.2847 277.761 93.9131 285.839 93.9131 285.839C98.241 280.799 102.468 276.18 106.595 271.982L106.595 271.95C146.16 231.807 175.037 228.282 175.037 228.282Z" fill="#86B4E2"/>
<path d="M-38.8105 177.76C-38.8105 177.76 -26.6194 154.891 -1.4243 160.153C-1.4243 160.153 12.7973 137.839 36.5708 147.298C36.5708 147.298 57.9046 147.247 63.1882 163.69C63.1882 163.69 83.9139 161.028 83.1012 183.567L-38.8105 177.76Z" fill="#1C31AF"/>
<path d="M342.311 50.5249C336.394 34.0822 312.506 34.1324 312.506 34.1324C297.704 28.8727 286.209 33.4367 278.92 38.5258C273.1 42.5891 269.962 46.9873 269.962 46.9873C241.75 41.7252 228.099 64.5945 228.099 64.5945L278.921 66.7564L364.608 70.4016C365.518 47.8624 342.311 50.5249 342.311 50.5249Z" fill="#232FC9"/>
<path d="M116.3 80.4658C111.65 80.4661 107.102 79.1461 103.215 76.6683C99.3285 74.1905 96.2727 70.663 94.424 66.5201C92.5754 62.3773 92.0145 57.7999 92.8106 53.3515C93.6066 48.903 95.7248 44.7777 98.9043 41.4834C95.0094 41.6828 91.2243 42.8072 87.881 44.7579C84.5377 46.7086 81.7382 49.426 79.7282 52.672C77.7181 55.9179 76.5588 59.5932 76.3519 63.3755C76.145 67.1579 76.8969 70.9317 78.5416 74.3662C80.1862 77.8006 82.6735 80.7908 85.7852 83.0745C88.8969 85.3581 92.5381 86.8655 96.3893 87.4645C100.241 88.0634 104.184 87.7356 107.875 86.5099C111.565 85.2841 114.89 83.1978 117.557 80.4338C117.14 80.4548 116.721 80.4655 116.3 80.4658Z" fill="url(#paint2_radial)"/>
</g>
</g>
<g filter="url(#filter1_d)">
<path d="M323.813 257.195C323.813 257.195 338.745 258.168 343.278 257.195C347.81 256.222 355.543 255.249 355.543 255.249L354.21 261.41C354.21 261.41 344.789 259.897 337.412 261.41C330.035 262.923 323.013 260.005 323.813 257.195Z" fill="#06236D"/>
</g>
<g filter="url(#filter2_d)">
<path d="M343.277 255.249V222.177L355.543 255.249H343.277Z" fill="#006466"/>
</g>
<g filter="url(#filter3_d)">
<path d="M323.813 257.195C323.813 257.195 317.769 253.088 355.543 255.249C355.543 255.249 344.803 256.97 343.277 257.195C343.277 257.195 330.39 258.276 323.813 257.195Z" fill="#66A1F7"/>
</g>
<g filter="url(#filter4_d)">
<path d="M324.613 250.17H342.833L336.256 195.914L324.613 250.17Z" fill="#006466"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="383" height="443" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="319.751" y="255.249" width="39.7918" height="14.5742" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="339.277" y="222.177" width="20.2652" height="41.0721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="319.458" y="254.621" width="40.0845" height="11.0543" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="320.613" y="195.914" width="26.22" height="62.2553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="192.508" y1="234.923" x2="189.528" y2="41.319" gradientUnits="userSpaceOnUse">
<stop stop-color="#0E225E"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="192.442" y1="744.571" x2="189.561" y2="292.348" gradientUnits="userSpaceOnUse">
<stop stop-color="#021038"/>
<stop offset="0.2013" stop-color="#03123C"/>
<stop offset="0.4025" stop-color="#061A48"/>
<stop offset="0.6038" stop-color="#0B265C"/>
<stop offset="0.804" stop-color="#123778"/>
<stop offset="1" stop-color="#1B4C9B"/>
</linearGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(96.9385 64.6196) scale(22.2791 21.6354)">
<stop stop-color="#CEB9A5"/>
<stop offset="0.2559" stop-color="#D2C1B1"/>
<stop offset="0.7119" stop-color="#DED6CF"/>
<stop offset="1" stop-color="#E6E6E6"/>
</radialGradient>
</defs>
</svg>
Any Suggestion is appreciated <3

You may try reordering your svg placing the defs at the top and placing the mask inside the defs, just like this:
<svg width="383" height="443" viewBox="0 0 383 443" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<filter id="filterd" x="0" y="0" width="383" height="443" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="319.751" y="255.249" width="39.7918" height="14.5742" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="339.277" y="222.177" width="20.2652" height="41.0721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="319.458" y="254.621" width="40.0845" height="11.0543" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="320.613" y="195.914" width="26.22" height="62.2553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="192.508" y1="234.923" x2="189.528" y2="41.319" gradientUnits="userSpaceOnUse">
<stop stop-color="#0E225E"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="192.442" y1="744.571" x2="189.561" y2="292.348" gradientUnits="userSpaceOnUse">
<stop stop-color="#021038"/>
<stop offset="0.2013" stop-color="#03123C"/>
<stop offset="0.4025" stop-color="#061A48"/>
<stop offset="0.6038" stop-color="#0B265C"/>
<stop offset="0.804" stop-color="#123778"/>
<stop offset="1" stop-color="#1B4C9B"/>
</linearGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(96.9385 64.6196) scale(22.2791 21.6354)">
<stop stop-color="#CEB9A5"/>
<stop offset="0.2559" stop-color="#D2C1B1"/>
<stop offset="0.7119" stop-color="#DED6CF"/>
<stop offset="1" stop-color="#E6E6E6"/>
</radialGradient>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="375" height="435">
<path d="M4 0H379V435H4V0Z" fill="#C4C4C4"/>
</mask>
</defs>
<g filter="url(#filterd)">
<g mask="url(#mask0)">
<path d="M379 0H4V276H379V0Z" fill="url(#paint0_linear)"/>
<path d="M379 241H4V812H379V241Z" fill="url(#paint1_linear)"/>
<path d="M173.689 237.491C162.098 240.71 146.09 240.036 128.504 237.176V237.226C73.9305 228.318 4.25799 198.413 4.25799 198.413L4 256.42L128.637 260.232V260.162L173.689 261.54V237.491Z" fill="#18117C"/>
<path d="M4.77394 242.964C4.77394 242.964 52.8546 259.792 108.068 259.603L4 256.42L4.77394 242.964Z" fill="black"/>
<path d="M4.25781 197.565C4.25781 197.565 18.4444 223.43 128.636 237.397C128.636 237.397 43.617 217.947 4.25781 197.565Z" fill="#2D25CE"/>
<path d="M226.721 257.182L225.824 237.868C212.722 247.317 198.71 257.795 198.71 257.795L226.721 257.182" fill="#0D0D63"/>
<path d="M226.794 257.256L379.001 253.501C379.001 253.501 350.348 200.194 299.348 239.554C299.348 239.554 251.785 217.953 239.751 227.049C236.075 229.827 231.114 233.785 225.998 237.942" fill="#0D0D63"/>
<path d="M252.493 280.208C186.435 189.537 130.192 237.74 106.041 267.792L106.062 268.437C98.229 278.189 93.9131 285.839 93.9131 285.839L106.604 285.384L106.607 285.501L252.493 280.208Z" fill="#2D25CE"/>
<path d="M175.037 228.282C144.438 226.725 120.143 249.844 106.224 267.402L106.212 267.621C98.2847 277.761 93.9131 285.839 93.9131 285.839C98.241 280.799 102.468 276.18 106.595 271.982L106.595 271.95C146.16 231.807 175.037 228.282 175.037 228.282Z" fill="#86B4E2"/>
<path d="M-38.8105 177.76C-38.8105 177.76 -26.6194 154.891 -1.4243 160.153C-1.4243 160.153 12.7973 137.839 36.5708 147.298C36.5708 147.298 57.9046 147.247 63.1882 163.69C63.1882 163.69 83.9139 161.028 83.1012 183.567L-38.8105 177.76Z" fill="#1C31AF"/>
<path d="M342.311 50.5249C336.394 34.0822 312.506 34.1324 312.506 34.1324C297.704 28.8727 286.209 33.4367 278.92 38.5258C273.1 42.5891 269.962 46.9873 269.962 46.9873C241.75 41.7252 228.099 64.5945 228.099 64.5945L278.921 66.7564L364.608 70.4016C365.518 47.8624 342.311 50.5249 342.311 50.5249Z" fill="#232FC9"/>
<path d="M116.3 80.4658C111.65 80.4661 107.102 79.1461 103.215 76.6683C99.3285 74.1905 96.2727 70.663 94.424 66.5201C92.5754 62.3773 92.0145 57.7999 92.8106 53.3515C93.6066 48.903 95.7248 44.7777 98.9043 41.4834C95.0094 41.6828 91.2243 42.8072 87.881 44.7579C84.5377 46.7086 81.7382 49.426 79.7282 52.672C77.7181 55.9179 76.5588 59.5932 76.3519 63.3755C76.145 67.1579 76.8969 70.9317 78.5416 74.3662C80.1862 77.8006 82.6735 80.7908 85.7852 83.0745C88.8969 85.3581 92.5381 86.8655 96.3893 87.4645C100.241 88.0634 104.184 87.7356 107.875 86.5099C111.565 85.2841 114.89 83.1978 117.557 80.4338C117.14 80.4548 116.721 80.4655 116.3 80.4658Z" fill="url(#paint2_radial)"/>
</g>
</g>
<g filter="url(#filter1_d)">
<path d="M323.813 257.195C323.813 257.195 338.745 258.168 343.278 257.195C347.81 256.222 355.543 255.249 355.543 255.249L354.21 261.41C354.21 261.41 344.789 259.897 337.412 261.41C330.035 262.923 323.013 260.005 323.813 257.195Z" fill="#06236D"/>
</g>
<g filter="url(#filter2_d)">
<path d="M343.277 255.249V222.177L355.543 255.249H343.277Z" fill="#006466"/>
</g>
<g filter="url(#filter3_d)">
<path d="M323.813 257.195C323.813 257.195 317.769 253.088 355.543 255.249C355.543 255.249 344.803 256.97 343.277 257.195C343.277 257.195 330.39 258.276 323.813 257.195Z" fill="#66A1F7"/>
</g>
<g filter="url(#filter4_d)">
<path d="M324.613 250.17H342.833L336.256 195.914L324.613 250.17Z" fill="#006466"/>
</g>
</svg>
Maybe the whole stuff comes as a problem with the actual placement of the mask tag. Browser display it correctly but maybe the pluging you are using just get confused by this weird placement and as a result it behaves weird too.

Two or more SVGs in a page. How can I animate them on button click?

Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
</g>
</g>
</svg>

You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation begin="Layer_1.click"
.container {
width:75%;
height:75%;
}
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
</g>
</g>
</svg>
</div>

Adding event listeners on different parts of svg pics

I have been given the assignment to add event listeners to different parts of an SVG element, as an image.
The objects it to display the directions (North, South, East, West), whenever the respective "hearts" are clicked.
I could add one event handler for the entire picture, but since it is given as a picture, and not the SVG-code is there any way to target different elements of the picture?
EDIT:
svg code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="756.36981"
height="756.36981"
id="svg2"
inkscape:version="0.48.4 r"
sodipodi:docname="fourHearts.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1137"
id="namedview3079"
showgrid="false"
inkscape:zoom="0.31201668"
inkscape:cx="378.18491"
inkscape:cy="378.18491"
inkscape:window-x="1192"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)"
id="north"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2816"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2820"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2822"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)"
id="south"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2841"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2843"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2845"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)"
id="east"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2861"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2863"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2865"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)"
id="west"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2869"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2871"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2873"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</svg>

since it is given as a picture, and not the SVG-code
You are not being clear here. Do you mean that you are loading the SVG using an <img>? If so, then you are correct, there is no way to target the individual leaf shapes.
But if you are loading it as an inline SVG, then you can:
document.getElementById("north").addEventListener("click", function(evt) {
console.log("North!");
});
document.getElementById("east").addEventListener("click", function(evt) {
console.log("East!");
});
document.getElementById("south").addEventListener("click", function(evt) {
console.log("South!");
});
document.getElementById("west").addEventListener("click", function(evt) {
console.log("West!");
});
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="756.36981"
height="756.36981"
id="svg2"
inkscape:version="0.48.4 r"
sodipodi:docname="fourHearts.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1137"
id="namedview3079"
showgrid="false"
inkscape:zoom="0.31201668"
inkscape:cx="378.18491"
inkscape:cy="378.18491"
inkscape:window-x="1192"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)"
id="north"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2816"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2820"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2822"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)"
id="south"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2841"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2843"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2845"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)"
id="east"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2861"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2863"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2865"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g
transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)"
id="west"
style="fill:#339900">
<rect
width="228.57143"
height="228.57143"
x="540.95331"
y="128.81105"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2869"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(-81.952479,151.13084)"
id="path2871"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
transform="translate(77.738331,149.63069)"
id="path2873"
style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</svg>

You can use the addEventListener for SVG element and then by using e.target.closest you can easyly find the nearby associated elements.
document.querySelector('svg').addEventListener('click',function(e){
console.log(e.target.closest('g').id);
})
document.querySelector('svg').addEventListener('click',function(e){
console.log(e.target.closest('g').id);
})
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="756.36981" height="756.36981" id="svg2"
inkscape:version="0.48.4 r" sodipodi:docname="fourHearts.svg">
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10"
inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1137" id="namedview3079"
showgrid="false" inkscape:zoom="0.31201668" inkscape:cx="378.18491" inkscape:cy="378.18491" inkscape:window-x="1192"
inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg2" />
<defs id="defs4" />
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)" id="north" style="fill:#339900">
<rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2816" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
id="path2820" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
id="path2822" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)" id="south" style="fill:#339900">
<rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2841" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
id="path2843" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
id="path2845" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)" id="east" style="fill:#339900">
<rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2861" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
id="path2863" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
id="path2865" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)" id="west" style="fill:#339900">
<rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect2869" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
id="path2871" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
id="path2873" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</svg>

You could use Fabric JS to draw one of the hearts 4 times as independent shapes and handle each one separately there.. that might be a bit of an overkill though, but here's the JS I utilized, and a Codepen in case this helps someone:
var canvas = new fabric.Canvas('canvas');
canvas.hoverCursor = "pointer";
var context = canvas.getContext('2d');
var north = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(north) {
north.set({
id: 'north',
left: 100,
top: 68,
width: 60,
height: 60,
hasControls: false,
hasBorders: false,
lockMovementX: true,
lockMovementY: true,
});
canvas.add(north);
});
var south = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(south) {
south.set({
id: 'south',
left: 100,
top: 132,
width: 60,
height: 60,
angle: 180,
hasControls: false,
hasBorders: false,
lockMovementX: true,
lockMovementY: true,
});
canvas.add(south);
});
var east = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(east) {
east.set({
id: 'east',
left: 135,
top: 100,
width: 60,
height: 60,
angle: 90,
hasControls: false,
hasBorders: false,
lockMovementX: true,
lockMovementY: true,
});
canvas.add(east);
});
var west = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(west) {
west.set({
id: 'west',
left: 65,
top: 100,
width: 60,
height: 60,
angle: 270,
hasControls: false,
hasBorders: false,
lockMovementX: true,
lockMovementY: true,
});
canvas.add(west);
});
canvas.on('mouse:down', function(event) {
var pos = null;
$('#location').html(canvas.getActiveObject().id + "Hi");
switch(canvas.getActiveObject().id) {
case "north":
pos = "North";
break;
case "south":
pos = "South";
break;
case "east":
pos = "East";
break;
case "west":
pos = "West";
break;
}
$("#location").html(pos);
});
Functioning directions with Fabric JS

Different SVG Icons rendering the same?

I have two SVG icons I'm importing within my react application using "react-svg-loader"
The icons are imported as components with their own paths yet the output is the same for which ever icon is first in the code.
Why is this happening and how can I fix this?
Here is my code:
import React, { Component } from 'react';
import Navigation from '../Navigation/index.js';
import MainLogo from '../MainLogo/index.js';
import Search from '../Search/index.js';
import './index.css'; // styles from
import Logo from '../../assets/svg/logos/Voo_Main.svg';
import SearchIcon from '../../assets/svg/icons/search.svg';
export default class Header extends Component {
render() {
const { navItems } = this.props;
return (
<header className="header">
<SearchIcon />
<Logo />
</header>
);
}
};
Here is the output:
Here is my loader within my webpack config:
// react-svg-loader
// https://www.npmjs.com/package/react-svg-loader
{
test: /\.svg$/,
use: [
{
loader: "babel-loader",
},
{
loader: "react-svg-loader",
options: {
jsx: true, // true outputs JSX tags
},
},
],
},
Here is the code for the SVG icons from the DOM:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M14.5 16A6.508 6.508 0 0 1 8 9.5C8 5.916 10.916 3 14.5 3S21 5.916 21 9.5 18.084 16 14.5 16m0-15C9.813 1 6 4.813 6 9.5c0 1.983.688 3.807 1.832 5.254l-6.539 6.539a.999.999 0 1 0 1.414 1.414l6.539-6.539A8.443 8.443 0 0 0 14.5 18c4.687 0 8.5-3.813 8.5-8.5C23 4.813 19.187 1 14.5 1"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#121A28" mask="url(#b)">
<path d="M0 24h24V0H0z"></path>
</g>
</g>
</svg>
Second icon:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="50" viewBox="0 0 120 50">
<defs>
<path id="a" d="M95.448 0c-6.967 0-13.25 2.905-17.717 7.567C73.262 2.905 66.979 0 60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81 2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0 13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91 17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969 0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718 7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008 0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327 1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1 1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337 9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0 0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903 10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#FEFEFE" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"></path>
</g>
</g>
</svg>

If you convert the SVG to a .jsx file and modify the attributes so it's .jsx-friendly, it will render the SVGs as if it were a .svg file.
import * as React from 'react';
const svg = (
<div>
<svg
width="120"
height="50"
viewBox="0 0 120 50"
>
<defs>
<path
id="a"
d="M95.448 0c-6.967 0-13.25
2.905-17.717 7.567C73.262 2.905 66.979 0
60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81
2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0
13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91
17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969
0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718
7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008
0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327
1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1
1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337
9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0
0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898
0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903
10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018
0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899
6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"
/>
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b" fill="#fff">
<use xmlns="http://www.w3.org/1999/xlink" xlinkHref="#a"/>
</mask>
<use fill="#FEFEFE"/>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"/>
</g>
</g >
</svg >
</div>
);
Excuse the blue background. That's the background color I have in my test dev environment.

Encountered the same issue - it seems that different SVGs used the same path id.
This is how I solved it - changed each SVG file to use different ID:
In your case - you should change the second SVG:
<path id="a" to <path id="b"
AND
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>
AND
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>

SVG mouseover does not work on nested elements

I would like to make it so that when you hover over a nested group #sec7kpi-c and then further into the text inside the animation effect when you mouseover continues.
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363">KPI</text>
</g>
</g>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c"
attributeName="transform"
type="scale"
dur="1s"
from="1"
to="2"
restart="whenNotActive"
begin="mouseover"
calcMode="spline"
values="1;1.5;1"
keyTimes="0;0.5;1"
keySplines=".16,.59,.46,.98;.88,.27,.37,1.52"
fill="freeze"
id="c-hover">
</animateTransform>

You can set the text pointer-events property to none to avoid this.
Note that your keySplines values are invalid (they must all be <= 1) so your animation should not work as written (if it does you should raise a bug on that UA). I've corrected that in my version.
Also I've removed the from and to attributes as they are ignored if you provide a values attribute.
body, html {
width: 100%;
height: 100%;
}
<svg width="100%" height="100%">
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>
</g>
</g>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c"
attributeName="transform"
type="scale"
dur="1s"
restart="whenNotActive"
begin="mouseover"
calcMode="spline"
values="1;1.5;1"
keyTimes="0;0.5;1"
keySplines=".16,.59,.46,.98;.88,.27,.37,1"
fill="freeze"
id="c-hover">
</animateTransform>
</svg>