Related
I have a svg image and want it to change color on hover. But it doesn't see colors. Can't get why... I watched and read many tutorials,however none of it helped. Mayve the problem it svg image, it is written incorrectly? Here is my code
svg{
max-width: 100%;
max-height: 150px;
margin:0 auto;
display: table;
}
svg:hover{
fill:orange
}
<a href="">
<svg width="132" height="133" viewBox="0 0 302 133" xmlns="http://www.w3.org/2000/svg" class="">
<g filter="url(#filter0_d)">
<path d="M65.9365 126.497C33.8292 126.793 5.95769 100.729 6.00005 66.583C6.04241 32.9873 32.4737 6.45774 66.0635 6.50005C99.5686 6.54236 126.042 32.9873 126 66.7523C126 100.729 98.2132 126.835 65.9365 126.497ZM26.7131 31.8026C26.8825 31.591 27.3908 31.4641 26.9672 31.1256C26.586 30.8294 26.5013 31.4218 26.2471 31.5487C26.12 31.591 26.0353 31.6757 25.993 31.8026C24.3834 33.3681 23.9598 33.2835 22.4349 30.9564C22.0113 31.4218 21.5454 31.8449 20.9524 32.5219C22.6891 32.5642 23.2821 33.9182 24.2139 34.7221C25.2305 35.6107 26.3318 36.4146 26.9248 37.8532C27.4331 37.2185 27.8567 36.7531 28.3227 36.203C25.4423 35.1029 25.0187 34.2144 26.2471 32.3103C26.4165 32.0988 26.5436 31.9718 26.7131 31.8026ZM23.1126 98.2747C24.0445 100.475 21.8843 100.179 20.9524 101.025C21.3336 101.533 21.7148 102.083 22.0537 102.506C23.2397 100.56 25.2305 99.5863 26.9672 98.4862C28.3227 97.64 28.3227 97.0899 27.179 96.1168C26.7978 97.1323 25.8235 97.5977 25.0611 98.2747C24.2139 99.0363 23.9174 98.4862 23.4939 97.9362C22.9856 97.0899 21.6725 96.2437 22.1808 95.3975C22.7738 94.4666 23.8751 93.578 25.3576 93.4511C24.5104 93.028 24.5952 91.9279 23.748 91.5471C23.4515 92.9857 19.5546 96.1591 17.6061 96.4553C17.9873 97.0476 18.3686 97.5977 18.7498 98.1477C20.6559 95.736 20.91 95.6936 22.6043 97.8516C22.8161 97.9785 22.9856 98.1054 23.1126 98.2747ZM76.653 120.996C76.5683 120.827 76.5683 120.573 76.3141 120.7C76.2294 120.742 76.3141 121.039 76.3565 121.25C77.4155 122.519 78.432 122.054 79.3639 121.123C80.2958 120.192 79.9993 119.177 79.1945 118.331C78.7285 117.865 78.0085 117.569 77.4155 117.23C76.4836 116.723 75.2552 116.257 76.0176 114.903C76.6954 113.719 77.7543 114.226 78.6438 114.946C78.8133 114.226 78.898 113.507 77.9661 113.422C76.7801 113.338 75.6788 113.761 75.1281 114.819C74.5775 115.919 74.9163 117.019 75.8906 117.823C76.3565 118.204 76.9919 118.415 77.5425 118.711C78.305 119.092 79.2792 119.473 78.8556 120.488C78.432 121.462 77.4578 121.335 76.653 120.996ZM111.895 36.2877C112.064 36.5838 112.149 36.9223 112.403 37.1762C112.7 37.4724 111.937 37.9801 112.657 38.1071C112.827 38.1494 113.038 37.9801 113.208 37.8532C113.716 37.4724 113.293 37.1339 113.081 36.8377C112.869 36.4992 112.572 36.203 112.318 35.9069C112.107 35.1876 111.641 34.6375 111.386 34.3836C109.396 36.33 107.235 37.7686 104.524 38.8264C105.965 39.5457 105.711 41.8728 107.913 41.9575C107.617 40.8997 105.541 40.5612 106.769 39.3341C107.49 38.6148 108.887 36.7108 109.692 39.5457C109.819 39.9688 110.243 39.7149 110.539 39.5034C110.793 39.2918 110.751 39.2072 110.582 38.911C109.48 37.0493 109.65 36.7531 111.895 36.2877ZM116.469 90.5739C117.359 90.1085 117.317 89.1776 117.401 88.3737C117.655 86.1311 116.173 84.3964 113.674 83.8886C112.064 83.5501 110.073 84.7772 109.396 86.5966C108.591 88.7545 109.438 90.8701 111.471 91.9279C113.42 92.9011 115.241 92.4356 116.469 90.6162V90.5739ZM114.267 63.5366C116.046 65.4829 118.46 65.7791 120.282 64.2136C121.807 62.8596 122.018 59.94 120.663 58.2899C119.35 56.6397 116.596 56.3435 114.817 57.6552C113.038 59.0092 112.784 61.3787 114.267 63.5366ZM52.0431 20.3784C54.0763 18.7282 54.3728 16.2741 52.8055 14.3701C51.4924 12.7622 48.6968 12.593 46.8754 13.9893C45.1811 15.3009 44.9269 18.2205 46.4095 19.9976C47.9344 21.817 50.0522 21.9439 52.0431 20.3784ZM34.2104 20.2514C32.6855 21.9439 32.4314 23.7633 33.6598 25.4981C34.7611 27.0213 36.1589 27.9099 38.1497 27.2752C40.0134 26.6828 41.1147 25.4135 41.2418 23.4671C41.3689 21.69 40.6064 20.0822 38.9121 19.3206C37.2178 18.559 35.5235 18.8128 34.2104 20.2514ZM22.3502 66.6253C22.2231 90.1085 40.9453 110.334 66.0212 110.334C91.0547 110.334 109.65 90.1085 109.735 66.583C109.819 42.4652 89.9534 23.1286 66.7413 22.7902C42.0466 22.4093 21.969 42.846 22.3502 66.6253ZM104.059 99.4171C106.473 99.3325 108.506 100.602 111.048 100.644C109.014 98.4016 107.235 96.4553 105.456 94.5089C104.694 95.1436 104.059 95.6513 105.753 96.3283C106.812 96.7514 107.617 97.7669 108.549 98.4862C108.421 98.6555 108.252 98.8247 108.125 98.994C106.346 98.5709 104.567 98.1477 102.661 97.7246C102.957 99.671 104.313 101.025 104.482 103.056C103.211 102.21 102.195 101.533 101.178 100.813C100.755 100.517 100.458 100.433 100.077 100.856C99.8228 101.152 99.6533 101.448 100.077 101.702C102.195 103.014 104.355 104.325 106.981 105.933C105.88 103.437 105.033 101.533 104.059 99.4171ZM112.445 77.4149C115.368 78.3457 118.164 78.0496 120.62 79.2343C120.578 78.4727 121.256 77.5841 119.519 77.7957C118.164 77.9649 116.681 77.4572 114.775 77.161C117.359 75.3839 119.519 73.903 121.849 72.2951C119.138 71.1527 116.3 71.8297 113.928 70.3065C113.801 70.8565 113.716 71.3643 113.589 71.9566C115.538 71.9143 117.359 71.999 119.307 72.6336C118.037 73.4799 116.978 74.1569 115.961 74.8762C114.902 75.5955 113.843 76.3571 112.445 77.4149ZM49.3745 120.7C48.9933 119.473 49.0357 118.161 49.9675 117.78C51.0265 117.315 52.3819 118.034 53.3138 118.627C54.2033 119.177 53.2715 120.235 52.9749 120.954C52.8055 121.419 52.509 121.631 53.102 121.842C53.695 122.054 53.9915 121.927 54.2457 121.165C54.9658 118.923 55.2623 116.511 56.533 114.438C55.7282 114.226 55.0928 114.057 54.4151 113.845C54.4575 114.099 54.4151 114.226 54.4575 114.311C54.8811 115.58 54.6269 117.188 53.7374 117.696C53.0173 118.119 51.5348 117.273 50.3911 116.934C49.8405 116.765 50.0099 116.342 50.1793 115.919C50.4335 115.199 50.6876 114.48 50.8571 113.719C50.9418 113.422 51.7466 113.507 51.2806 113.126C50.8147 112.745 50.1793 112.449 49.5016 112.661C48.7815 112.872 49.544 113.168 49.5016 113.422C49.0357 115.75 48.6968 118.119 47.3413 120.192C47.892 120.277 48.5274 120.446 49.3745 120.7ZM87.7508 17.6704C87.7508 15.3432 85.7599 13.4815 83.3879 13.5238C81.27 13.6085 79.1945 15.851 79.2792 18.0512C79.3639 20.2091 81.3124 22.0285 83.6421 21.9862C85.9717 21.9862 87.7084 20.1668 87.7508 17.6704ZM18.0297 75.0454C17.4367 76.6533 15.9542 76.5263 15.3611 76.0609C14.3022 75.257 15.7 74.7069 16.1659 74.1569C17.0555 73.0991 18.1568 72.2105 17.5214 70.3065C16.9284 71.2373 16.7166 72.2105 15.9542 72.6759C15.2764 73.0991 15.0646 74.2415 13.7939 73.903C10.7018 73.1414 9.93933 73.9453 10.4476 76.9918C10.5323 77.5841 10.5747 78.1765 10.6171 78.515C13.2432 77.6688 15.8694 77.2879 18.7074 77.5418C18.4533 76.6956 18.2838 75.9763 18.0297 75.0454ZM22.6467 41.5343C23.7904 42.8883 22.8161 43.9461 22.0113 44.7924C20.8677 46.0617 19.3428 46.1887 17.7755 45.4694C16.5472 44.877 15.7 44.0308 15.9542 42.5075C16.2083 40.8574 16.9284 39.6303 19.0886 39.6726C18.072 38.7841 17.4367 38.1494 16.4624 39.5034C14.5563 42.2113 14.7258 45.0039 17.0131 46.4425C19.131 47.7965 21.7995 47.0772 23.0703 44.6654C23.6209 43.6923 25.0187 42.296 22.6467 41.5343ZM113.716 52.3239C111.556 51.4353 110.836 49.7006 111.641 47.9235C112.445 46.104 114.775 45.0886 116.385 45.8079C117.359 46.231 117.74 47.2042 118.037 48.135C118.333 49.0236 118.121 49.9121 117.232 50.716C119.35 50.7584 119.138 49.5313 118.884 48.4312C118.206 45.6809 116.173 44.0731 114.013 44.5385C111.429 45.0886 109.904 47.1195 110.539 49.6159C110.921 51.0545 110.963 53.1701 113.716 52.3239ZM85.9294 117.357C86.1835 118.838 86.7765 119.134 88.2167 118.542C91.2241 117.315 92.4949 115.369 91.6477 113.042C90.7158 110.545 88.3438 109.487 85.7176 110.587C84.4892 111.138 82.7949 111.645 84.0233 113.719C84.6586 111.518 86.2682 110.672 88.3438 111.307C89.911 111.814 91.2665 114.311 90.7158 115.707C90.0381 117.569 87.8355 118.331 85.9294 117.357ZM29.2122 109.487C30.1864 110.672 31.4148 111.518 32.982 111.095C34.7187 110.672 35.9047 109.445 36.3283 107.71C36.7519 105.933 35.4388 103.86 33.575 102.717C31.796 101.617 31.4995 103.479 30.61 104.114C30.3135 104.325 30.017 104.537 29.6781 104.748C30.2288 105.214 30.5253 105.891 31.2877 106.018C31.2877 104.706 32.0925 103.564 33.0244 103.437C33.9563 103.31 34.8458 104.452 35.0576 105.51C35.3964 107.16 35.0152 108.641 33.5327 109.784C31.8807 111.095 30.6523 110.122 29.2122 109.487ZM17.0131 84.1848C16.9707 84.9041 15.2341 84.0155 16.0812 85.2426C16.9284 86.512 16.3777 86.9351 15.2764 87.3582C13.6668 87.9929 13.8786 86.8504 13.8786 85.9619C13.8786 85.4118 13.5821 85.4118 13.2009 85.4542C12.735 85.4965 12.6502 85.7926 12.8197 86.1735C13.328 87.3159 13.7939 88.416 14.2175 89.4315C16.4624 87.739 18.9616 87.0197 21.4607 86.3004C20.1899 82.7462 20.1899 82.7462 18.7498 83.0847C19.724 83.4655 20.4864 84.3117 20.0629 85.0733C19.6393 85.835 18.4533 86.3004 17.5214 86.0888C16.6319 85.9619 16.886 85.031 17.0131 84.1848ZM13.328 51.4353C12.7773 51.2238 12.269 50.6314 11.8454 51.0968C11.2101 51.8162 11.1254 52.747 11.3371 53.6779C11.5066 54.4395 12.0149 54.8626 12.7773 54.9895C13.921 55.1588 14.7681 54.6087 15.6576 53.9741C16.5472 53.3817 17.6061 52.6201 18.3686 53.9741C19.0886 55.328 17.945 55.8358 16.7166 56.2166C17.479 56.809 18.1568 57.0205 18.6227 56.3012C19.3004 55.2857 19.4275 54.1433 18.7074 53.1278C18.1568 52.3239 17.3096 51.9008 16.3354 52.2393C15.5729 52.5355 14.8528 53.0432 14.1328 53.4663C13.4127 53.8894 12.5232 54.5664 11.9725 53.5509C11.4219 52.5355 12.0996 51.7738 13.328 51.4353ZM95.1634 19.0244C94.0197 21.5208 92.4949 23.6364 90.8005 25.6674C91.9442 26.5136 91.8595 26.429 92.7914 25.1596C93.2149 24.5673 93.1302 23.3402 94.528 23.5518C95.2058 23.6364 95.3752 25.4558 96.18 24.1441C96.5612 23.5518 95.2058 23.3825 94.7822 22.9171C94.6975 22.8325 94.6127 22.7055 94.4857 22.6209C95.9258 20.3784 96.3918 20.2091 97.366 21.4785C97.8319 22.0708 97.8319 22.0708 98.552 21.3092C97.4507 20.5899 96.3494 19.8283 95.1634 19.0244ZM64.2421 16.6126C63.6491 18.1358 62.8443 18.2628 61.9548 18.1781C60.9382 18.0512 61.2347 17.078 61.1077 16.4857C60.8535 15.174 60.6417 13.82 60.8111 12.5083C61.0653 10.6043 60.1334 10.8159 59.2016 11.0697C59.6675 13.6931 60.1758 16.2741 59.8793 18.9398C63.395 19.1513 64.1151 18.8975 64.2421 16.6126ZM39.8016 116.807C41.2842 114.438 42.1313 111.899 44.2492 109.995C43.5291 109.868 43.1903 109.064 42.3855 109.233C41.8772 111.222 39.5899 115.03 38.3615 115.834C38.8698 116.215 39.3357 116.511 39.8016 116.807ZM30.7794 33.7066C31.203 33.2412 31.6689 32.6911 32.0925 32.2257C29.3392 31.2949 28.0262 28.7984 25.8659 27.2329C25.4423 27.5291 24.934 27.9522 24.7646 28.2907C26.9672 29.9409 29.0004 31.5064 30.7794 33.7066ZM100.162 111.18C98.0437 109.403 96.6459 107.245 95.3752 104.875C94.8245 105.256 94.2739 105.637 93.7232 105.975C95.7564 107.076 96.773 109.149 98.0014 110.926C98.8485 112.111 99.3568 112.195 100.162 111.18ZM14.7681 64.1712C14.7681 63.2827 14.2598 62.7749 13.5398 62.6903C12.7773 62.6057 12.269 62.9865 12.1419 63.8751C12.0572 64.8482 12.5655 65.356 13.3703 65.3983C14.1328 65.3983 14.6834 64.9329 14.7681 64.1712ZM103.804 29.8562C103.804 28.9254 103.338 28.3753 102.576 28.3753C101.771 28.4176 101.136 28.9677 101.221 29.8562C101.263 30.6602 101.898 31.1256 102.618 31.0833C103.296 31.1256 103.889 30.6602 103.804 29.8562ZM72.629 16.1472C73.1373 16.1049 73.7303 15.6817 73.6032 14.8355C73.4762 14.1162 73.0102 13.5238 72.1631 13.5661C71.3159 13.6085 70.9347 14.2431 70.9347 15.0048C70.9347 15.8087 71.443 16.2318 72.629 16.1472ZM65.64 117.992C65.174 117.95 64.6657 118.288 64.6657 119.177C64.6657 119.938 64.9199 120.573 65.8094 120.573C66.6142 120.573 67.1225 120.023 67.2496 119.346C67.3766 118.5 66.8683 118.077 65.64 117.992ZM29.0004 109.318C28.8733 108.472 28.5768 107.668 28.7039 106.737C26.5013 107.922 28.0261 108.599 29.0004 109.318Z" fill="#0C1E34"/>
<path d="M71.8668 66.6679C74.9589 64.1715 77.2462 66.0332 79.2794 67.6834C83.2187 70.8568 84.913 75.2572 85.506 80.1231C85.9296 83.635 85.972 87.1469 85.8025 90.6588C85.7178 92.3089 86.8615 93.4937 87.2427 95.0592C74.4083 95.0592 61.6585 95.0592 48.6123 95.0592C50.9843 92.1397 50.349 88.8394 50.349 85.666C50.3913 72.0415 50.3913 58.4594 50.3066 44.8349C50.3066 42.8039 50.942 42.2962 52.7634 42.5078C54.0765 42.6347 55.4319 42.6347 56.7874 42.5078C58.1005 42.3808 58.4393 42.8463 58.4393 44.1579C58.3546 48.9392 58.397 53.7627 58.397 58.544C58.397 68.9104 58.4393 79.2768 58.3546 89.6433C58.3546 91.1665 58.5664 91.8858 60.3454 91.8012C63.8611 91.6319 63.8611 91.7589 63.8611 88.247C63.8611 83.508 63.9035 78.8114 63.8188 74.0725C63.8188 72.8031 64.1153 72.38 65.4707 72.38C71.3161 72.2954 71.3161 72.2531 71.3161 77.9652C71.3161 82.0694 71.3585 86.1314 71.2738 90.2356C71.2738 91.4204 71.6126 91.8012 72.7987 91.8012C77.8392 91.8858 77.7545 91.9281 77.8393 87.0199C77.8816 83.5504 77.7969 80.1231 77.331 76.6958C76.865 72.7185 75.3401 69.1643 71.8668 66.6679Z" fill="#0C1E34"/>
<path d="M48.104 36.8379C55.3896 36.8379 62.6328 36.7533 69.8336 36.8802C72.0786 36.9649 74.2388 37.8111 76.1449 39.0805C80.4654 41.9577 82.4139 46.1466 81.9903 51.1394C81.5244 56.8938 78.1781 60.8711 72.8834 62.9867C69.6642 64.2984 66.1485 64.2984 62.7175 64.2561C61.3197 64.2561 61.4044 63.4098 61.362 62.4367C61.2773 61.2096 61.955 61.2942 62.8022 61.2942C68.4358 61.2096 72.0786 58.8825 73.7305 54.3974C74.7895 51.5202 74.5777 51.1394 71.6126 51.1394C69.7912 51.1394 67.9275 51.1394 66.1061 51.1394C65.0895 51.1394 63.8611 51.6048 63.9035 49.6585C63.9458 47.839 65.0472 48.2622 66.0214 48.2622C68.2664 48.2198 70.5537 48.2198 72.7986 48.2622C74.1541 48.3045 74.2812 47.8814 73.8576 46.6543C72.4598 42.677 69.1559 40.1806 65.0048 40.1383C60.8537 40.1383 56.7027 40.1383 52.5092 40.1383C49.2477 40.1806 49.2477 40.1806 48.104 36.8379Z" fill="#0C1E34"/>
<path d="M34.1679 20.2938C34.4221 20.8862 34.7186 20.4208 34.9727 20.3362C37.3024 19.363 39.6321 20.4631 40.1404 22.9172C40.3945 24.0596 40.3945 25.202 39.2085 25.9213C38.0225 26.683 36.8365 26.6406 35.6928 25.7944C33.8714 24.4404 33.4478 22.9172 34.3374 20.8862C34.4644 20.59 34.5915 20.3785 34.1679 20.2938C34.2103 20.2515 34.1679 20.2938 34.1679 20.2938Z" fill="#0C1E34"/>
<path d="M80.5498 18.0087C80.6769 15.8084 81.9899 14.3275 83.8537 14.4121C85.4633 14.4545 86.6069 15.7661 86.5222 17.5009C86.4375 19.6588 85.0397 21.3936 83.4301 21.3513C81.7782 21.2667 80.4651 19.7434 80.5498 18.0087Z" fill="#0C1E34"/>
<path d="M52.0431 20.3362C51.2806 19.7862 50.7724 20.7594 50.0946 20.717C48.6968 20.6324 47.6802 19.9131 47.1296 18.7284C46.5366 17.5437 46.0706 16.2743 47.0025 15.0049C48.358 13.1432 50.8571 13.4394 52.0854 15.5973C53.0173 17.2052 52.2972 18.7707 52.0431 20.3362C52.0431 20.3786 52.0431 20.3362 52.0431 20.3362Z" fill="#0C1E34"/>
<path d="M11.9302 76.9495C11.0406 77.0764 10.8712 76.6533 10.9559 76.1032C11.083 74.9185 11.8454 74.4954 12.9467 74.4954C13.921 74.4954 14.4716 74.9608 14.2598 75.8917C13.9633 77.288 12.4385 76.2725 11.9302 76.9495Z" fill="#0C1E34"/>
<path d="M114.267 63.537C115.071 63.1139 114.309 62.7331 114.182 62.3946C113.547 60.5329 114.478 58.8404 116.639 58.1634C118.545 57.571 120.281 58.4173 120.832 60.1521C121.171 61.2522 120.747 62.1407 120.07 62.8177C118.884 64.0024 117.316 64.0024 115.749 63.7909C115.241 63.7063 114.944 62.7331 114.267 63.537C114.267 63.4947 114.267 63.537 114.267 63.537Z" fill="#0C1E34"/>
<path d="M116.512 90.5315C115.198 90.4892 114.097 91.4624 112.657 90.9969C110.709 90.3622 109.438 88.9236 109.819 87.4427C110.285 85.581 112.106 84.7348 114.14 85.4117C116.639 86.258 117.274 87.4427 116.512 89.6006C116.427 89.8545 115.791 90.2353 116.469 90.5738L116.512 90.5315Z" fill="#0C1E34"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0.5" width="132" height="132" 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/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</a>
Your CSS rule is only setting the fill colour for the <svg> element. The child <path> elements have their own fill attributes that override that colour.
One way to fix it, is to change the fule to:
svg:hover path{
fill:orange
}
So that you are changing the fill of the <path> elements on hover.
This exact solution may not work for every SVG though. You may need to tweak it for other ones.
svg{
max-width: 100%;
max-height: 150px;
margin:0 auto;
display: table;
}
svg:hover path{
fill:orange
}
<a href="">
<svg width="132" height="133" viewBox="0 0 302 133" xmlns="http://www.w3.org/2000/svg" class="">
<g filter="url(#filter0_d)">
<path d="M65.9365 126.497C33.8292 126.793 5.95769 100.729 6.00005 66.583C6.04241 32.9873 32.4737 6.45774 66.0635 6.50005C99.5686 6.54236 126.042 32.9873 126 66.7523C126 100.729 98.2132 126.835 65.9365 126.497ZM26.7131 31.8026C26.8825 31.591 27.3908 31.4641 26.9672 31.1256C26.586 30.8294 26.5013 31.4218 26.2471 31.5487C26.12 31.591 26.0353 31.6757 25.993 31.8026C24.3834 33.3681 23.9598 33.2835 22.4349 30.9564C22.0113 31.4218 21.5454 31.8449 20.9524 32.5219C22.6891 32.5642 23.2821 33.9182 24.2139 34.7221C25.2305 35.6107 26.3318 36.4146 26.9248 37.8532C27.4331 37.2185 27.8567 36.7531 28.3227 36.203C25.4423 35.1029 25.0187 34.2144 26.2471 32.3103C26.4165 32.0988 26.5436 31.9718 26.7131 31.8026ZM23.1126 98.2747C24.0445 100.475 21.8843 100.179 20.9524 101.025C21.3336 101.533 21.7148 102.083 22.0537 102.506C23.2397 100.56 25.2305 99.5863 26.9672 98.4862C28.3227 97.64 28.3227 97.0899 27.179 96.1168C26.7978 97.1323 25.8235 97.5977 25.0611 98.2747C24.2139 99.0363 23.9174 98.4862 23.4939 97.9362C22.9856 97.0899 21.6725 96.2437 22.1808 95.3975C22.7738 94.4666 23.8751 93.578 25.3576 93.4511C24.5104 93.028 24.5952 91.9279 23.748 91.5471C23.4515 92.9857 19.5546 96.1591 17.6061 96.4553C17.9873 97.0476 18.3686 97.5977 18.7498 98.1477C20.6559 95.736 20.91 95.6936 22.6043 97.8516C22.8161 97.9785 22.9856 98.1054 23.1126 98.2747ZM76.653 120.996C76.5683 120.827 76.5683 120.573 76.3141 120.7C76.2294 120.742 76.3141 121.039 76.3565 121.25C77.4155 122.519 78.432 122.054 79.3639 121.123C80.2958 120.192 79.9993 119.177 79.1945 118.331C78.7285 117.865 78.0085 117.569 77.4155 117.23C76.4836 116.723 75.2552 116.257 76.0176 114.903C76.6954 113.719 77.7543 114.226 78.6438 114.946C78.8133 114.226 78.898 113.507 77.9661 113.422C76.7801 113.338 75.6788 113.761 75.1281 114.819C74.5775 115.919 74.9163 117.019 75.8906 117.823C76.3565 118.204 76.9919 118.415 77.5425 118.711C78.305 119.092 79.2792 119.473 78.8556 120.488C78.432 121.462 77.4578 121.335 76.653 120.996ZM111.895 36.2877C112.064 36.5838 112.149 36.9223 112.403 37.1762C112.7 37.4724 111.937 37.9801 112.657 38.1071C112.827 38.1494 113.038 37.9801 113.208 37.8532C113.716 37.4724 113.293 37.1339 113.081 36.8377C112.869 36.4992 112.572 36.203 112.318 35.9069C112.107 35.1876 111.641 34.6375 111.386 34.3836C109.396 36.33 107.235 37.7686 104.524 38.8264C105.965 39.5457 105.711 41.8728 107.913 41.9575C107.617 40.8997 105.541 40.5612 106.769 39.3341C107.49 38.6148 108.887 36.7108 109.692 39.5457C109.819 39.9688 110.243 39.7149 110.539 39.5034C110.793 39.2918 110.751 39.2072 110.582 38.911C109.48 37.0493 109.65 36.7531 111.895 36.2877ZM116.469 90.5739C117.359 90.1085 117.317 89.1776 117.401 88.3737C117.655 86.1311 116.173 84.3964 113.674 83.8886C112.064 83.5501 110.073 84.7772 109.396 86.5966C108.591 88.7545 109.438 90.8701 111.471 91.9279C113.42 92.9011 115.241 92.4356 116.469 90.6162V90.5739ZM114.267 63.5366C116.046 65.4829 118.46 65.7791 120.282 64.2136C121.807 62.8596 122.018 59.94 120.663 58.2899C119.35 56.6397 116.596 56.3435 114.817 57.6552C113.038 59.0092 112.784 61.3787 114.267 63.5366ZM52.0431 20.3784C54.0763 18.7282 54.3728 16.2741 52.8055 14.3701C51.4924 12.7622 48.6968 12.593 46.8754 13.9893C45.1811 15.3009 44.9269 18.2205 46.4095 19.9976C47.9344 21.817 50.0522 21.9439 52.0431 20.3784ZM34.2104 20.2514C32.6855 21.9439 32.4314 23.7633 33.6598 25.4981C34.7611 27.0213 36.1589 27.9099 38.1497 27.2752C40.0134 26.6828 41.1147 25.4135 41.2418 23.4671C41.3689 21.69 40.6064 20.0822 38.9121 19.3206C37.2178 18.559 35.5235 18.8128 34.2104 20.2514ZM22.3502 66.6253C22.2231 90.1085 40.9453 110.334 66.0212 110.334C91.0547 110.334 109.65 90.1085 109.735 66.583C109.819 42.4652 89.9534 23.1286 66.7413 22.7902C42.0466 22.4093 21.969 42.846 22.3502 66.6253ZM104.059 99.4171C106.473 99.3325 108.506 100.602 111.048 100.644C109.014 98.4016 107.235 96.4553 105.456 94.5089C104.694 95.1436 104.059 95.6513 105.753 96.3283C106.812 96.7514 107.617 97.7669 108.549 98.4862C108.421 98.6555 108.252 98.8247 108.125 98.994C106.346 98.5709 104.567 98.1477 102.661 97.7246C102.957 99.671 104.313 101.025 104.482 103.056C103.211 102.21 102.195 101.533 101.178 100.813C100.755 100.517 100.458 100.433 100.077 100.856C99.8228 101.152 99.6533 101.448 100.077 101.702C102.195 103.014 104.355 104.325 106.981 105.933C105.88 103.437 105.033 101.533 104.059 99.4171ZM112.445 77.4149C115.368 78.3457 118.164 78.0496 120.62 79.2343C120.578 78.4727 121.256 77.5841 119.519 77.7957C118.164 77.9649 116.681 77.4572 114.775 77.161C117.359 75.3839 119.519 73.903 121.849 72.2951C119.138 71.1527 116.3 71.8297 113.928 70.3065C113.801 70.8565 113.716 71.3643 113.589 71.9566C115.538 71.9143 117.359 71.999 119.307 72.6336C118.037 73.4799 116.978 74.1569 115.961 74.8762C114.902 75.5955 113.843 76.3571 112.445 77.4149ZM49.3745 120.7C48.9933 119.473 49.0357 118.161 49.9675 117.78C51.0265 117.315 52.3819 118.034 53.3138 118.627C54.2033 119.177 53.2715 120.235 52.9749 120.954C52.8055 121.419 52.509 121.631 53.102 121.842C53.695 122.054 53.9915 121.927 54.2457 121.165C54.9658 118.923 55.2623 116.511 56.533 114.438C55.7282 114.226 55.0928 114.057 54.4151 113.845C54.4575 114.099 54.4151 114.226 54.4575 114.311C54.8811 115.58 54.6269 117.188 53.7374 117.696C53.0173 118.119 51.5348 117.273 50.3911 116.934C49.8405 116.765 50.0099 116.342 50.1793 115.919C50.4335 115.199 50.6876 114.48 50.8571 113.719C50.9418 113.422 51.7466 113.507 51.2806 113.126C50.8147 112.745 50.1793 112.449 49.5016 112.661C48.7815 112.872 49.544 113.168 49.5016 113.422C49.0357 115.75 48.6968 118.119 47.3413 120.192C47.892 120.277 48.5274 120.446 49.3745 120.7ZM87.7508 17.6704C87.7508 15.3432 85.7599 13.4815 83.3879 13.5238C81.27 13.6085 79.1945 15.851 79.2792 18.0512C79.3639 20.2091 81.3124 22.0285 83.6421 21.9862C85.9717 21.9862 87.7084 20.1668 87.7508 17.6704ZM18.0297 75.0454C17.4367 76.6533 15.9542 76.5263 15.3611 76.0609C14.3022 75.257 15.7 74.7069 16.1659 74.1569C17.0555 73.0991 18.1568 72.2105 17.5214 70.3065C16.9284 71.2373 16.7166 72.2105 15.9542 72.6759C15.2764 73.0991 15.0646 74.2415 13.7939 73.903C10.7018 73.1414 9.93933 73.9453 10.4476 76.9918C10.5323 77.5841 10.5747 78.1765 10.6171 78.515C13.2432 77.6688 15.8694 77.2879 18.7074 77.5418C18.4533 76.6956 18.2838 75.9763 18.0297 75.0454ZM22.6467 41.5343C23.7904 42.8883 22.8161 43.9461 22.0113 44.7924C20.8677 46.0617 19.3428 46.1887 17.7755 45.4694C16.5472 44.877 15.7 44.0308 15.9542 42.5075C16.2083 40.8574 16.9284 39.6303 19.0886 39.6726C18.072 38.7841 17.4367 38.1494 16.4624 39.5034C14.5563 42.2113 14.7258 45.0039 17.0131 46.4425C19.131 47.7965 21.7995 47.0772 23.0703 44.6654C23.6209 43.6923 25.0187 42.296 22.6467 41.5343ZM113.716 52.3239C111.556 51.4353 110.836 49.7006 111.641 47.9235C112.445 46.104 114.775 45.0886 116.385 45.8079C117.359 46.231 117.74 47.2042 118.037 48.135C118.333 49.0236 118.121 49.9121 117.232 50.716C119.35 50.7584 119.138 49.5313 118.884 48.4312C118.206 45.6809 116.173 44.0731 114.013 44.5385C111.429 45.0886 109.904 47.1195 110.539 49.6159C110.921 51.0545 110.963 53.1701 113.716 52.3239ZM85.9294 117.357C86.1835 118.838 86.7765 119.134 88.2167 118.542C91.2241 117.315 92.4949 115.369 91.6477 113.042C90.7158 110.545 88.3438 109.487 85.7176 110.587C84.4892 111.138 82.7949 111.645 84.0233 113.719C84.6586 111.518 86.2682 110.672 88.3438 111.307C89.911 111.814 91.2665 114.311 90.7158 115.707C90.0381 117.569 87.8355 118.331 85.9294 117.357ZM29.2122 109.487C30.1864 110.672 31.4148 111.518 32.982 111.095C34.7187 110.672 35.9047 109.445 36.3283 107.71C36.7519 105.933 35.4388 103.86 33.575 102.717C31.796 101.617 31.4995 103.479 30.61 104.114C30.3135 104.325 30.017 104.537 29.6781 104.748C30.2288 105.214 30.5253 105.891 31.2877 106.018C31.2877 104.706 32.0925 103.564 33.0244 103.437C33.9563 103.31 34.8458 104.452 35.0576 105.51C35.3964 107.16 35.0152 108.641 33.5327 109.784C31.8807 111.095 30.6523 110.122 29.2122 109.487ZM17.0131 84.1848C16.9707 84.9041 15.2341 84.0155 16.0812 85.2426C16.9284 86.512 16.3777 86.9351 15.2764 87.3582C13.6668 87.9929 13.8786 86.8504 13.8786 85.9619C13.8786 85.4118 13.5821 85.4118 13.2009 85.4542C12.735 85.4965 12.6502 85.7926 12.8197 86.1735C13.328 87.3159 13.7939 88.416 14.2175 89.4315C16.4624 87.739 18.9616 87.0197 21.4607 86.3004C20.1899 82.7462 20.1899 82.7462 18.7498 83.0847C19.724 83.4655 20.4864 84.3117 20.0629 85.0733C19.6393 85.835 18.4533 86.3004 17.5214 86.0888C16.6319 85.9619 16.886 85.031 17.0131 84.1848ZM13.328 51.4353C12.7773 51.2238 12.269 50.6314 11.8454 51.0968C11.2101 51.8162 11.1254 52.747 11.3371 53.6779C11.5066 54.4395 12.0149 54.8626 12.7773 54.9895C13.921 55.1588 14.7681 54.6087 15.6576 53.9741C16.5472 53.3817 17.6061 52.6201 18.3686 53.9741C19.0886 55.328 17.945 55.8358 16.7166 56.2166C17.479 56.809 18.1568 57.0205 18.6227 56.3012C19.3004 55.2857 19.4275 54.1433 18.7074 53.1278C18.1568 52.3239 17.3096 51.9008 16.3354 52.2393C15.5729 52.5355 14.8528 53.0432 14.1328 53.4663C13.4127 53.8894 12.5232 54.5664 11.9725 53.5509C11.4219 52.5355 12.0996 51.7738 13.328 51.4353ZM95.1634 19.0244C94.0197 21.5208 92.4949 23.6364 90.8005 25.6674C91.9442 26.5136 91.8595 26.429 92.7914 25.1596C93.2149 24.5673 93.1302 23.3402 94.528 23.5518C95.2058 23.6364 95.3752 25.4558 96.18 24.1441C96.5612 23.5518 95.2058 23.3825 94.7822 22.9171C94.6975 22.8325 94.6127 22.7055 94.4857 22.6209C95.9258 20.3784 96.3918 20.2091 97.366 21.4785C97.8319 22.0708 97.8319 22.0708 98.552 21.3092C97.4507 20.5899 96.3494 19.8283 95.1634 19.0244ZM64.2421 16.6126C63.6491 18.1358 62.8443 18.2628 61.9548 18.1781C60.9382 18.0512 61.2347 17.078 61.1077 16.4857C60.8535 15.174 60.6417 13.82 60.8111 12.5083C61.0653 10.6043 60.1334 10.8159 59.2016 11.0697C59.6675 13.6931 60.1758 16.2741 59.8793 18.9398C63.395 19.1513 64.1151 18.8975 64.2421 16.6126ZM39.8016 116.807C41.2842 114.438 42.1313 111.899 44.2492 109.995C43.5291 109.868 43.1903 109.064 42.3855 109.233C41.8772 111.222 39.5899 115.03 38.3615 115.834C38.8698 116.215 39.3357 116.511 39.8016 116.807ZM30.7794 33.7066C31.203 33.2412 31.6689 32.6911 32.0925 32.2257C29.3392 31.2949 28.0262 28.7984 25.8659 27.2329C25.4423 27.5291 24.934 27.9522 24.7646 28.2907C26.9672 29.9409 29.0004 31.5064 30.7794 33.7066ZM100.162 111.18C98.0437 109.403 96.6459 107.245 95.3752 104.875C94.8245 105.256 94.2739 105.637 93.7232 105.975C95.7564 107.076 96.773 109.149 98.0014 110.926C98.8485 112.111 99.3568 112.195 100.162 111.18ZM14.7681 64.1712C14.7681 63.2827 14.2598 62.7749 13.5398 62.6903C12.7773 62.6057 12.269 62.9865 12.1419 63.8751C12.0572 64.8482 12.5655 65.356 13.3703 65.3983C14.1328 65.3983 14.6834 64.9329 14.7681 64.1712ZM103.804 29.8562C103.804 28.9254 103.338 28.3753 102.576 28.3753C101.771 28.4176 101.136 28.9677 101.221 29.8562C101.263 30.6602 101.898 31.1256 102.618 31.0833C103.296 31.1256 103.889 30.6602 103.804 29.8562ZM72.629 16.1472C73.1373 16.1049 73.7303 15.6817 73.6032 14.8355C73.4762 14.1162 73.0102 13.5238 72.1631 13.5661C71.3159 13.6085 70.9347 14.2431 70.9347 15.0048C70.9347 15.8087 71.443 16.2318 72.629 16.1472ZM65.64 117.992C65.174 117.95 64.6657 118.288 64.6657 119.177C64.6657 119.938 64.9199 120.573 65.8094 120.573C66.6142 120.573 67.1225 120.023 67.2496 119.346C67.3766 118.5 66.8683 118.077 65.64 117.992ZM29.0004 109.318C28.8733 108.472 28.5768 107.668 28.7039 106.737C26.5013 107.922 28.0261 108.599 29.0004 109.318Z" fill="#0C1E34"/>
<path d="M71.8668 66.6679C74.9589 64.1715 77.2462 66.0332 79.2794 67.6834C83.2187 70.8568 84.913 75.2572 85.506 80.1231C85.9296 83.635 85.972 87.1469 85.8025 90.6588C85.7178 92.3089 86.8615 93.4937 87.2427 95.0592C74.4083 95.0592 61.6585 95.0592 48.6123 95.0592C50.9843 92.1397 50.349 88.8394 50.349 85.666C50.3913 72.0415 50.3913 58.4594 50.3066 44.8349C50.3066 42.8039 50.942 42.2962 52.7634 42.5078C54.0765 42.6347 55.4319 42.6347 56.7874 42.5078C58.1005 42.3808 58.4393 42.8463 58.4393 44.1579C58.3546 48.9392 58.397 53.7627 58.397 58.544C58.397 68.9104 58.4393 79.2768 58.3546 89.6433C58.3546 91.1665 58.5664 91.8858 60.3454 91.8012C63.8611 91.6319 63.8611 91.7589 63.8611 88.247C63.8611 83.508 63.9035 78.8114 63.8188 74.0725C63.8188 72.8031 64.1153 72.38 65.4707 72.38C71.3161 72.2954 71.3161 72.2531 71.3161 77.9652C71.3161 82.0694 71.3585 86.1314 71.2738 90.2356C71.2738 91.4204 71.6126 91.8012 72.7987 91.8012C77.8392 91.8858 77.7545 91.9281 77.8393 87.0199C77.8816 83.5504 77.7969 80.1231 77.331 76.6958C76.865 72.7185 75.3401 69.1643 71.8668 66.6679Z" fill="#0C1E34"/>
<path d="M48.104 36.8379C55.3896 36.8379 62.6328 36.7533 69.8336 36.8802C72.0786 36.9649 74.2388 37.8111 76.1449 39.0805C80.4654 41.9577 82.4139 46.1466 81.9903 51.1394C81.5244 56.8938 78.1781 60.8711 72.8834 62.9867C69.6642 64.2984 66.1485 64.2984 62.7175 64.2561C61.3197 64.2561 61.4044 63.4098 61.362 62.4367C61.2773 61.2096 61.955 61.2942 62.8022 61.2942C68.4358 61.2096 72.0786 58.8825 73.7305 54.3974C74.7895 51.5202 74.5777 51.1394 71.6126 51.1394C69.7912 51.1394 67.9275 51.1394 66.1061 51.1394C65.0895 51.1394 63.8611 51.6048 63.9035 49.6585C63.9458 47.839 65.0472 48.2622 66.0214 48.2622C68.2664 48.2198 70.5537 48.2198 72.7986 48.2622C74.1541 48.3045 74.2812 47.8814 73.8576 46.6543C72.4598 42.677 69.1559 40.1806 65.0048 40.1383C60.8537 40.1383 56.7027 40.1383 52.5092 40.1383C49.2477 40.1806 49.2477 40.1806 48.104 36.8379Z" fill="#0C1E34"/>
<path d="M34.1679 20.2938C34.4221 20.8862 34.7186 20.4208 34.9727 20.3362C37.3024 19.363 39.6321 20.4631 40.1404 22.9172C40.3945 24.0596 40.3945 25.202 39.2085 25.9213C38.0225 26.683 36.8365 26.6406 35.6928 25.7944C33.8714 24.4404 33.4478 22.9172 34.3374 20.8862C34.4644 20.59 34.5915 20.3785 34.1679 20.2938C34.2103 20.2515 34.1679 20.2938 34.1679 20.2938Z" fill="#0C1E34"/>
<path d="M80.5498 18.0087C80.6769 15.8084 81.9899 14.3275 83.8537 14.4121C85.4633 14.4545 86.6069 15.7661 86.5222 17.5009C86.4375 19.6588 85.0397 21.3936 83.4301 21.3513C81.7782 21.2667 80.4651 19.7434 80.5498 18.0087Z" fill="#0C1E34"/>
<path d="M52.0431 20.3362C51.2806 19.7862 50.7724 20.7594 50.0946 20.717C48.6968 20.6324 47.6802 19.9131 47.1296 18.7284C46.5366 17.5437 46.0706 16.2743 47.0025 15.0049C48.358 13.1432 50.8571 13.4394 52.0854 15.5973C53.0173 17.2052 52.2972 18.7707 52.0431 20.3362C52.0431 20.3786 52.0431 20.3362 52.0431 20.3362Z" fill="#0C1E34"/>
<path d="M11.9302 76.9495C11.0406 77.0764 10.8712 76.6533 10.9559 76.1032C11.083 74.9185 11.8454 74.4954 12.9467 74.4954C13.921 74.4954 14.4716 74.9608 14.2598 75.8917C13.9633 77.288 12.4385 76.2725 11.9302 76.9495Z" fill="#0C1E34"/>
<path d="M114.267 63.537C115.071 63.1139 114.309 62.7331 114.182 62.3946C113.547 60.5329 114.478 58.8404 116.639 58.1634C118.545 57.571 120.281 58.4173 120.832 60.1521C121.171 61.2522 120.747 62.1407 120.07 62.8177C118.884 64.0024 117.316 64.0024 115.749 63.7909C115.241 63.7063 114.944 62.7331 114.267 63.537C114.267 63.4947 114.267 63.537 114.267 63.537Z" fill="#0C1E34"/>
<path d="M116.512 90.5315C115.198 90.4892 114.097 91.4624 112.657 90.9969C110.709 90.3622 109.438 88.9236 109.819 87.4427C110.285 85.581 112.106 84.7348 114.14 85.4117C116.639 86.258 117.274 87.4427 116.512 89.6006C116.427 89.8545 115.791 90.2353 116.469 90.5738L116.512 90.5315Z" fill="#0C1E34"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0.5" width="132" height="132" 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/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</a>
I'm using an SVG image mask on this but as you can see, the image is getting some opacity added for some reason
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#F71A3A"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#F71A3A"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>
What am I missing?
The color of the mask need to be white (#fff). The fill coloration control the opacity.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#fff"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#fff"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>
For more detail refer to the specification: https://drafts.fxtf.org/css-masking-1/#MaskValues. The color value is used in combination with mask-type and the default configuration is luminance so we use black to define the invisible part and white the visible one
This is my svg, the eyes blink every 12 seconds, but I want the user to be able to trigger that on any mouseover event. So restart the animation on hover.
I've tried adding
begin="mouseover;...." to my svg animate tags, but it just triggers that lone animation, not all 6 animations, and I don't want it to trigger when the user hovers over a small shape, but rather over the whole svg.
I'm not keen on javascript because it slows the load time. I'd love some assistance, it'll help those impatient to view the animation again.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto; margin-top: -110px;">
<path d="M13.936 69.536s-.904.55-1.48 1.279-1.667 3.216-1.667 3.216-1.105-7.03-1.199-10.04c-.093-3.01.45-7.942.45-7.942l-8.691.6s1.9-6.464 3.147-8.991c1.245-2.527 3.596-5.994 3.596-5.994s-2.52-.16-3.896.15S0 43.612 0 43.612c2.675-9.279 6.027-16.872 10.94-22.178C18.673 13.326 34.6-.32 57.991.004s33.594 5.326 44.206 13.637c10.612 8.311 17.832 29.67 17.832 29.67l-7.942-2.098 6.743 14.685-8.99.6-.75 15.883-2.847-3.296s-.488 10.012-1.649 13.936c-1.16 3.924-4.645 9.44-4.645 9.44l-1.349-3.596s-2.494 7.072-5.095 9.59c-2.118 2.051-5.239 2.718-7.942 3.896-7.797 3.4-13.699 8.929-23.826 9.141s-27.169-6.132-33.417-11.239c-6.248-5.106-6.593-11.389-6.593-11.389l-1.199 5.245s-4.679-9.466-5.694-13.636-.9-10.939-.9-10.939z" fill="#45332c" fill-rule="evenodd"/><path d="M19.331 13.043s-3.966-3.487-4.945-5.844c-.904-2.176-.6-7.043-.6-7.043s7.166 3.172 13.17 5.076c3 .953 7.174.818 12.08 1.929 4.907 1.11 10.865 3.784 10.865 3.784L48.85 6.3l6.894 5.544 3.896-9.29 3.596 9.74 7.643-5.695-1.499 4.646s6.731-2.78 10.639-3.747c3.908-.965 8.456-.707 12.737-1.873 4.281-1.165 12.737-5.17 12.737-5.17s-.35 4.496-1.199 6.594c-.849 2.098-3.896 5.994-3.896 5.994s6.142 7.34 7.343 12.438c1.2 5.097 1.137 11.9-1.199 16.933s-6.847 9.09-11.688 11.389c-4.842 2.298-10.806 2.824-15.734 1.798-4.928-1.026-9.334-4.78-12.438-7.193s-6.444-6.593-6.444-6.593-4.605 5.051-7.942 7.492c-3.336 2.442-7.178 5.841-12.138 6.744-4.96.902-11.333.372-16.184-2.398-4.85-2.77-9.06-8.213-10.789-13.337s-.665-10.657.45-15.285 5.694-11.988 5.694-11.988z" fill="#785647" fill-rule="evenodd"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734"/>
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732"/>
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<path d="M34.232 104.03l-.344 6.305 3.284 8.9 3.391-6.781 2.12 7.629 3.92-7.735 2.119 6.04 2.86-6.146 1.167-7.312zM65.57 105.35l5.616 13.563 2.437-6.676 2.437 8.16 3.709-8.054 2.33 6.676 3.71-9.007-1.166-6.781z" fill="#f59e01" fill-rule="evenodd"/><path d="M21.064 60.248s-1.255 4.953-1.199 7.642c.056 2.69 1.649 8.242 1.649 8.242l1.648-3.896s-.085 7.66 1.086 11.09c1.172 3.427 5.058 8.091 5.058 8.091l.15-4.196s.463 3.721 1.948 5.844 7.343 5.845 7.343 5.845l-7.043 7.792 5.094.6-2.547 2.397s4.28-.363 5.994-1.349c1.715-.986 3.896-4.196 3.896-4.196s1.782 3.081 3.121 3.966c1.34.885 4.664.917 4.664.917s-.704-3.049-.442-3.234c.32-.227 2.997 1.798 2.997 1.798l-.45-2.098 11.538-.15-.45 2.847 3.783-.837-.869 2.111s4.14-.577 4.938-1.413c.797-.835 3.537-3.607 3.537-3.607s3.022 3.412 4.646 4.196c1.623.784 4.495.75 4.495.75l-2.547-2.698 6.144.45s-3.181-3.102-4.346-4.646-2.697-4.495-2.697-4.495 5.457-2.504 6.893-4.496 1.648-6.294 1.648-6.294l1.218 4.566s3.437-5.57 4.327-7.862c.89-2.293.717-3.393.899-5.245s.15-5.844.15-5.844l1.798 2.697s1.37-7.276 1.498-9.89c.128-2.615-.3-5.694-.3-5.694l-40.758 4.345z" fill="#785647" fill-rule="evenodd"/><path d="M36.563 61.997l-5.006 6.939s4.14 1.15 6.252.953c2.112-.197 6.04-2.119 6.04-2.119s-1.236 3.934-2.331 5.404c-1.096 1.47-3.921 3.285-3.921 3.285s4.698.717 6.993.212c2.296-.505 6.358-3.179 6.358-3.179l-1.59 6.888 7.63-8.795 3.062 16.27 3.19-16.482 6.463 8.795-.636-7.206s2.438 2.334 4.45 3.073 7.418.742 7.418.742l-5.26-8.59s2.796 1.16 4.795 1.35c2 .19 7.043-.6 7.043-.6l-4.645-7.193s-8.02-.125-11.913-.899c-1.947-.387-6.65-2.862-8.88-3.889s-3.15-.13-3.15-.13-6.802 3.06-10.823 4.146c-4.021 1.085-11.539 1.025-11.539 1.025z" fill="#ffe8bb" fill-rule="evenodd"/><path d="M53.047 37.768s4.706-3.805 7.343-3.746c2.637.059 6.593 3.746 6.593 3.746S63.06 66.979 60.54 66.989c-3.12.012-7.492-29.221-7.492-29.221z" fill="#f59e01" fill-rule="evenodd"/>
<animate
id = "yellowEye"
xlink:href="#yellow"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye.end+12s;"
/>
<animate
id = "yellowEye2"
xlink:href="#yellow2"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye2.end+12s;"
/>
<animate
id = "blackEye"
xlink:href="#black"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye.end+12s;"
/>
<animate
id = "blackEye2"
xlink:href="#black2"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye2.end+12s;"
/>
<animate
id = "whiteEye"
xlink:href="#white"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye.end+12s;"
/>
<animate
id = "whiteEye2"
xlink:href="#white2"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye2.end+12s;"
/>
</svg>
In SMIL you can use the event mouseover. Since you want the eyes to blink simultaneously I've putted the eyes in a group and I'm targeting the group:
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
However you won't get a blink when mousing between the eyes. To fix this I'm adding to the group a rect behind the eyes:
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
The rect has no fill so you need to add pointer-events="all" in order to make it sensitive to the mouse.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto;">
<g id="theGroup">
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734" />
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732" />
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<animate id="yellowEye" xlink:href="#yellow" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="yellowEye2" xlink:href="#yellow2" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye" xlink:href="#black" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye2" xlink:href="#black2" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye" xlink:href="#white" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye2" xlink:href="#white2" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; whiteEye2.end+12s;" />
</g>
</svg>
I'm using some SVG icons from Entypo as <img> elements in my HTML.
<img src="svg/Entypo+ Social Extension/twitter-with-circle.svg"></img>
Is it possible to change colors of this icon using CSS? Or do I need to edit the SVG itself?
You will need to inline using the <svg> element, and then change the color of the particular path with:
svg path.myPath {
fill: red !important;
}
Here is an example:
svg path {
fill: red !important;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg role="img" aria-label="Code The Web logo" 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" id="svg2" viewBox="0 0 622.72601 266.69141" height="266.69141" width="622.72601" inkscape:version="0.91 r13725"
sodipodi:docname="codetheweb-transparent-clipped.svg">
<title>Code The Web logo</title>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="672"
id="namedview17"
showgrid="false"
inkscape:zoom="0.44000089"
inkscape:cx="311.36301"
inkscape:cy="133.3457"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs>
<linearGradient xmlns="http://www.w3.org/2000/svg" x1="100%" y1="100%" x2="38.1041974%" y2="38.1041974%" id="pink-theme">
<stop stop-color="#FFC83E" offset="0%"/>
<stop stop-color="#FA709A" offset="100%"/>
</linearGradient>
</defs>
<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="translate(-188.63727,-419.01646)"
id="layer1">
<g
transform="matrix(0.48045801,0,0,0.48045801,191.67458,286.97533)"
id="g4184">
<g
style="font-style:normal;font-weight:normal;font-size:184.62117004px;line-height:100%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="text4138">
<path
d="m 392.37834,367.00251 q 0,-12.00037 4.43091,-23.63151 4.61552,-11.63113 13.29272,-20.86219 8.67719,-9.23106 21.04681,-14.95431 12.36962,-5.72326 28.24704,-5.72326 19.01598,0 32.86257,7.93871 14.03121,7.75409 20.86219,20.67757 l -27.50855,19.56985 q -1.84621,-4.80015 -4.98477,-7.93871 -2.95394,-3.13856 -6.64637,-4.98478 -3.69242,-1.84621 -7.75408,-2.58469 -3.87705,-0.73849 -7.56947,-0.73849 -7.75409,0 -13.47735,3.13856 -5.53863,2.95394 -9.23106,7.93871 -3.5078,4.80015 -5.35401,11.07727 -1.66159,6.0925 -1.66159,12.185 0,6.83098 2.03083,13.1081 2.03083,6.27712 5.90788,11.07727 3.87704,4.80016 9.41568,7.75409 5.72325,2.76932 12.73886,2.76932 3.69242,0 7.56947,-0.73848 3.87704,-0.92311 7.38484,-2.76932 3.69243,-2.03083 6.46175,-4.98477 2.95393,-3.13856 4.61552,-7.56947 l 29.35477,17.53901 q -2.95394,7.20023 -9.04644,12.92348 -5.90787,5.72326 -13.66196,9.6003 -7.56947,3.87705 -16.43129,5.90788 -8.67719,2.03083 -16.98515,2.03083 -14.58507,0 -26.77006,-5.72325 -12.00038,-5.90788 -20.8622,-15.50818 -8.67719,-9.6003 -13.47734,-21.7853 -4.80015,-12.185 -4.80015,-24.73924 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4146" />
<path
d="m 583.78145,434.75848 q -14.95431,0 -27.13931,-5.72325 -12.185,-5.72326 -20.86219,-14.95432 -8.6772,-9.41568 -13.47735,-21.41605 -4.80015,-12.00038 -4.80015,-24.73924 0,-12.92348 4.98477,-24.92386 4.98478,-12.00037 13.84659,-21.04681 9.04644,-9.23106 21.23144,-14.58507 12.36961,-5.53864 26.95469,-5.53864 14.95431,0 27.13931,5.72326 12.185,5.72325 20.86219,15.13893 8.6772,9.41568 13.29273,21.41606 4.80015,12.00038 4.80015,24.55461 0,12.92349 -4.98478,24.92386 -4.98477,11.81576 -13.84658,21.04682 -8.86182,9.04643 -21.23144,14.58507 -12.185,5.53863 -26.77007,5.53863 z m -29.72401,-66.46362 q 0,6.64636 1.84622,12.92348 1.84621,6.0925 5.53863,10.89265 3.69242,4.80015 9.23106,7.75409 5.72326,2.95394 13.47734,2.95394 7.75409,0 13.47735,-2.95394 5.72326,-3.13856 9.23106,-7.93871 3.69242,-4.98477 5.35401,-11.26189 1.84621,-6.27712 1.84621,-12.73886 0,-6.64636 -1.84621,-12.73886 -1.84621,-6.27712 -5.72325,-10.89265 -3.69243,-4.80015 -9.41568,-7.56947 -5.53864,-2.95394 -13.10811,-2.95394 -7.75409,0 -13.47734,2.95394 -5.53864,2.95394 -9.23106,7.93871 -3.69242,4.80015 -5.53864,11.07727 -1.66159,6.0925 -1.66159,12.55424 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4148" />
<path
d="m 665.69267,433.65076 0,-131.08103 50.40158,0 q 16.24666,0 28.61628,5.16939 12.36962,5.16939 20.67757,14.03121 8.30795,8.86181 12.55424,20.86219 4.24629,11.81575 4.24629,25.2931 0,14.95432 -4.80015,27.13931 -4.61553,12.00038 -13.29273,20.67757 -8.67719,8.49258 -20.86219,13.29273 -12.185,4.61553 -27.13931,4.61553 l -50.40158,0 z m 79.94096,-65.72514 q 0,-7.56947 -2.03083,-13.84659 -2.03083,-6.27712 -5.90788,-10.70803 -3.69242,-4.4309 -9.23105,-6.83098 -5.53864,-2.58469 -12.36962,-2.58469 l -14.40045,0 0,68.30983 14.40045,0 q 7.0156,0 12.55424,-2.5847 5.53863,-2.58469 9.23106,-7.20022 3.87704,-4.61553 5.72325,-10.89265 2.03083,-6.27712 2.03083,-13.66197 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4150" />
<path
d="m 891.08629,402.26516 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46211 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4152" />
<path
d="m 573.97201,518.57648 -37.66272,0 0,99.69543 -36.00113,0 0,-99.69543 -37.84734,0 0,-31.3856 111.51119,0 0,31.3856 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4154" />
<path
d="m 702.84624,487.19088 0,131.08103 -36.00113,0 0,-51.32468 -43.93984,0 0,51.32468 -36.00113,0 0,-131.08103 36.00113,0 0,48.37075 43.93984,0 0,-48.37075 36.00113,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4157" />
<path
d="m 818.78834,586.88631 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46212 47.63226,0 0,29.17014 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4160" />
<path
d="m 479.16471,671.81204 33.04719,0 11.44651,40.43203 11.63114,-40.43203 33.04719,0 -21.60068,62.58657 9.41568,27.32394 28.24704,-89.91051 39.13969,0 -51.32469,131.08103 -29.90863,0 -18.64674,-46.89378 -18.46211,46.89378 -29.90863,0 -51.32469,-131.08103 38.95507,0 28.43166,89.91051 9.04644,-27.32394 -21.23144,-62.58657 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4162" />
<path
d="m 725.93687,771.50747 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.38559 -55.75559,0 0,18.46212 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4164" />
<path
d="m 854.00916,769.29201 q 0,8.86182 -3.69242,15.32356 -3.69243,6.27712 -10.15417,10.33879 -6.46174,4.06166 -15.13893,6.09249 -8.49258,1.84622 -18.09288,1.84622 l -64.43279,0 0,-131.08103 76.06393,0 q 6.83098,0 12.36961,2.95393 5.53864,2.95394 9.41568,7.75409 3.87705,4.61553 5.90788,10.70803 2.21546,5.90788 2.21546,12.185 0,9.23106 -4.80016,17.72363 -4.61552,8.30795 -14.0312,12.55424 11.26189,3.32318 17.72363,11.63113 6.64636,8.12334 6.64636,21.96992 z m -36.55499,-7.38484 q 0,-4.80015 -2.5847,-7.93871 -2.58469,-3.32318 -6.64636,-3.32318 l -29.72401,0 0,21.96991 28.43166,0 q 4.43091,0 7.38485,-2.76931 3.13856,-2.76932 3.13856,-7.93871 z m -38.95507,-59.44802 0,20.12371 24.55462,0 q 3.69242,0 6.64636,-2.03084 3.13856,-2.03083 3.13856,-8.12333 0,-5.35401 -2.5847,-7.56946 -2.58469,-2.40008 -6.0925,-2.40008 l -25.66234,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4166" />
</g>
<g
id="text4174"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4159"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:end;text-anchor:end;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 365.22161,274.82381 -223.82127,270.07767 223.82127,284.99909 -147.72204,0 L -6.321707,546.39362 217.49957,274.82381 l 147.72204,0 0,0 z" />
</g>
<g
id="text4194"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4156"
transform="matrix(2.0813473,0,0,2.0813473,-398.94138,-488.31149)"
d="m 632.85156,366.6543 107.53711,136.92968 -107.53711,129.76172 70.97461,0 107.53711,-130.47851 -107.53711,-136.21289 -70.97461,0 z M 747,519.79297 c 0.80996,-0.0316 1.61242,0.039 2.4082,0.21094 l -0.32812,7.29687 c -1.21787,-0.29127 -2.44312,-0.2221 -3.67383,0.20703 -1.25114,0.41197 -2.28005,1.09675 -3.08594,2.05664 -0.60012,0.71482 -1.00546,1.48995 -1.21679,2.32227 -0.21131,0.83233 -0.24033,1.67566 -0.0898,2.5332 0.15055,0.85756 0.47925,1.7095 0.98828,2.55469 0.48866,0.82807 1.15094,1.59387 1.98828,2.29687 0.85778,0.72014 1.73852,1.24999 2.63868,1.5879 0.90015,0.33788 1.78559,0.50607 2.65625,0.50585 0.86738,-0.0378 1.69968,-0.24257 2.5,-0.61523 0.77988,-0.3898 1.48861,-0.96309 2.12304,-1.71875 1.45746,-1.73598 2.02804,-3.86871 1.71289,-6.39648 l -3.16406,3.76953 -4.28906,-3.60157 7.50976,-8.94531 11.58008,9.72266 -4.14062,4.93164 -1.80664,-1.51758 c 0.004,2.64953 -0.84366,4.9859 -2.54102,7.00781 -1.18311,1.40921 -2.56047,2.55063 -4.13086,3.42578 -1.59079,0.85802 -3.26742,1.36356 -5.0332,1.51758 -1.76578,0.15401 -3.58424,-0.0661 -5.45313,-0.66015 -1.86888,-0.59412 -3.69192,-1.63717 -5.46875,-3.12891 -1.53173,-1.28597 -2.71011,-2.76241 -3.53711,-4.43164 -0.84743,-1.68637 -1.33147,-3.43363 -1.45117,-5.24023 -0.14016,-1.82378 0.0799,-3.64028 0.66016,-5.45118 0.57696,-1.84846 1.52544,-3.56021 2.8457,-5.13281 0.82303,-0.98032 1.72402,-1.82514 2.70313,-2.53516 0.95867,-0.72715 1.96988,-1.288 3.0332,-1.68359 1.06002,-0.43315 2.14335,-0.70681 3.25,-0.82226 0.27156,-0.0332 0.54251,-0.0559 0.8125,-0.0664 z m -19.3125,23.53125 c 1.84746,-0.0854 3.65008,0.17341 5.40625,0.77734 1.77331,0.58351 3.35338,1.45904 4.74219,2.625 1.42962,1.20026 2.57684,2.63288 3.4414,4.29883 0.84414,1.64879 1.36632,3.39283 1.56446,5.23047 0.17773,1.82051 -9.9e-4,3.67194 -0.53711,5.55469 -0.51896,1.86232 -1.45598,3.59945 -2.81055,5.21289 -1.38888,1.65428 -2.96568,2.89063 -4.73047,3.70703 -1.76478,0.81639 -3.56162,1.27438 -5.38867,1.37695 -1.84746,0.0854 -3.65833,-0.16258 -5.43164,-0.74609 -1.77334,-0.58351 -3.36425,-1.46729 -4.77344,-2.65039 -1.42965,-1.20026 -2.57684,-2.63288 -3.4414,-4.29883 -0.86457,-1.66594 -1.3848,-3.40999 -1.5625,-5.23047 -0.18098,-1.85807 -0.002,-3.70949 0.5371,-5.55469 0.53613,-1.88275 1.48137,-3.6307 2.83594,-5.24414 1.38885,-1.65428 2.96568,-2.88868 4.73047,-3.70508 1.76479,-0.81641 3.57048,-1.26809 5.41797,-1.35351 z m -0.041,7.32812 c -0.87395,-0.0373 -1.73047,0.13189 -2.56836,0.50782 -0.84114,0.33834 -1.6134,0.92631 -2.3164,1.76367 -0.72014,0.85778 -1.18195,1.74097 -1.38672,2.64844 -0.18763,0.88703 -0.1772,1.76724 0.0312,2.63867 0.18808,0.85427 0.54351,1.67373 1.06641,2.46094 0.51966,0.74963 1.13673,1.42526 1.85156,2.02539 0.73523,0.61726 1.53646,1.11538 2.40234,1.49414 0.84542,0.36158 1.70421,0.56031 2.57813,0.59765 0.87395,0.0373 1.73111,-0.11282 2.57226,-0.45117 0.85833,-0.35877 1.64705,-0.96644 2.36719,-1.82422 0.72018,-0.85778 1.18393,-1.74096 1.38867,-2.64844 0.18434,-0.9246 0.17391,-1.80482 -0.0312,-2.63867 -0.20848,-0.87143 -0.58298,-1.69025 -1.12304,-2.45703 -0.52293,-0.7872 -1.1426,-1.47995 -1.85743,-2.08008 -0.73526,-0.61728 -1.52568,-1.10716 -2.37109,-1.46875 -0.86585,-0.37875 -1.73286,-0.5686 -2.60352,-0.56836 z m -28.07031,19.37696 16.54102,13.88867 8.2832,-9.86524 5.20703,4.37305 -13.29687,15.83789 -21.75,-18.25976 5.01562,-5.97461 z m -7.33984,12.34961 c 0.87065,-2.2e-4 1.73706,0.17057 2.59961,0.51171 0.85934,0.30363 1.63572,0.74711 2.33008,1.33008 1.02119,0.85733 1.77783,1.94588 2.27148,3.26563 0.49039,1.28216 0.53364,2.64218 0.12891,4.07812 1.41354,-0.93718 2.88121,-1.37903 4.40039,-1.32226 1.51591,0.0192 3.03855,0.673 4.57031,1.95898 0.98029,0.82301 1.65742,1.7375 2.0293,2.7461 0.3515,0.99145 0.45161,2.03493 0.30078,3.12695 -0.1508,1.09204 -0.51643,2.21087 -1.09766,3.35937 -0.58449,1.11095 -1.32321,2.19776 -2.21484,3.25977 l -8.97657,10.69141 -21.75,-18.25977 10.59571,-12.62305 c 0.63439,-0.75566 1.3717,-1.30227 2.21289,-1.64062 0.84115,-0.33837 1.70852,-0.49934 2.59961,-0.48242 z m -0.11133,8.09961 c -0.12798,-0.016 -0.25372,-0.0142 -0.375,0.006 -0.50554,0.063 -0.92031,0.28969 -1.24609,0.67773 l -3.57618,4.25781 3.33985,2.80274 3.41992,-4.07422 c 0.34292,-0.40847 0.54016,-0.86938 0.58984,-1.38477 0.0669,-0.53581 -0.2362,-1.08653 -0.91015,-1.65234 -0.44423,-0.37294 -0.85824,-0.58467 -1.24219,-0.63281 z m 8.41797,6.08203 c -0.60765,-0.0227 -1.10129,0.19131 -1.47852,0.64062 l -4.14062,4.93164 3.64648,3.06055 3.95899,-4.7168 c 0.41153,-0.49016 0.60231,-1.02736 0.57031,-1.61133 -0.0147,-0.60439 -0.30886,-1.14685 -0.88086,-1.62695 -0.531,-0.44581 -1.08853,-0.67218 -1.67578,-0.67773 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:start;text-anchor:start;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<text
id="text4216"
y="936.22046"
x="133.85828"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="936.22046"
x="133.85828"
id="tspan4218" /></text>
</g>
</svg>
I have a code like this in my HTML:
<a href="#">
<object type="image/svg+xml" class="nav-logo" width="204" height="34" data="img/wp/logo-white.svg">nav-logo</object>
</a>
I need to change the fill color upon scrolling so I make a class which will select the <g> tag inside the SVG image and change the fill attribute's value but it doesn't seem to work no matter what I tried.
Here's the body of the SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>emissaries-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="emissaries-logo" fill="#FFFFFF">
<path d="M44.762,42.7358 L15.313,42.7358 C15.206,44.1288 15.1,45.9488 15.1,47.8738 C15.1,59.7608 20.347,64.7938 28.7,64.7938 C34.375,64.7938 40.694,61.4758 43.479,57.8358 C43.799,57.4078 45.727,58.8008 45.727,60.2978 C45.727,60.6208 45.62,60.8348 45.406,61.1528 C41.979,66.1858 35.232,72.2938 24.952,72.2938 C10.817,72.2938 0,61.2628 0,47.6598 C0,33.6338 9.746,22.0658 24.952,22.0658 C38.98,22.0658 46.796,31.8138 46.796,41.2388 C46.796,42.1988 45.941,42.7358 44.762,42.7358 M25.166,26.2438 C19.919,26.2438 16.813,31.4908 15.848,38.7718 L27.628,38.4538 C31.913,38.3438 32.982,37.3798 32.982,34.8128 C32.982,30.0978 30.199,26.2438 25.166,26.2438" id="Fill-1"></path>
<path d="M155.6013,15.4228 C159.7763,15.4228 163.2033,11.8868 163.2033,7.6038 C163.2033,2.6298 158.3443,-1.2802 153.1483,0.3928 C150.6603,1.1938 148.6583,3.3068 148.0863,5.8568 C146.9593,10.8798 150.8663,15.4228 155.6013,15.4228" id="Fill-3"></path>
<path d="M170.1641,66.8327 C164.3821,66.1867 162.8841,64.6887 162.8841,57.8357 L162.8841,41.0197 C162.8841,35.4547 163.4181,27.0987 163.7401,22.7117 C163.7401,22.0657 163.0961,21.5337 161.8111,21.5337 C160.9561,21.5337 160.3141,22.1747 159.8841,22.3887 C155.7091,24.8507 148.3211,27.7457 142.3231,29.0287 C141.8951,29.0287 141.4661,30.0977 141.4661,30.8487 C141.4661,31.5997 141.8951,32.5647 142.3231,32.6687 C147.4631,33.0967 148.9611,34.2757 148.9611,39.9507 L148.9611,57.8357 C148.9611,64.6887 147.3561,66.1867 141.6811,66.8327 C141.6431,66.8417 141.4931,66.8417 141.4481,66.8327 C135.2381,66.1867 134.2731,64.6887 134.2731,57.8357 L134.2731,37.9167 C134.2731,29.4567 128.9181,22.0657 118.1031,22.0657 C111.6771,22.0657 105.7891,25.1737 101.0761,31.3857 C98.8291,25.6017 92.9381,22.0657 85.5491,22.0657 C79.7651,22.0657 74.3041,25.0647 70.1281,31.0627 L70.5551,22.4987 C70.5551,21.8517 69.9151,21.3197 68.6281,21.3197 C67.7731,21.3197 67.1291,21.9607 66.7001,22.1747 C62.8471,24.5327 55.4561,27.3127 50.4231,28.6007 C49.8891,28.6007 49.5671,29.6697 49.5671,30.4207 C49.5671,31.1717 49.8891,32.1317 50.4231,32.2417 C55.4561,32.6687 56.3141,33.8477 56.3141,39.5227 L56.3141,57.8357 C56.3141,64.6887 55.3491,66.1867 49.1391,66.8327 C48.6031,66.9367 48.2811,68.0067 48.2811,68.7577 C48.2811,69.6127 48.6031,70.6867 49.1391,70.6867 C53.6361,70.6867 57.6001,70.1497 62.7401,70.1497 C67.8801,70.1497 71.2001,70.6867 75.6951,70.6867 C76.1251,70.6867 76.5541,69.6127 76.5541,68.7577 C76.5541,68.0067 76.1251,66.9367 75.6951,66.8327 C71.0901,66.3997 70.3421,64.5797 70.3421,57.8357 L70.3421,36.8467 C73.0211,32.3457 75.4831,29.7797 80.0881,29.7797 C86.1901,29.7797 88.4411,33.6347 88.4411,40.4877 L88.4411,57.8357 C88.4411,64.5797 87.5831,66.3997 83.0851,66.8327 C82.6571,66.9367 82.2281,68.0067 82.2281,68.7577 C82.2281,69.6127 82.6571,70.6867 83.0851,70.6867 C87.5831,70.6867 91.0111,70.1497 96.1491,70.1497 C101.1841,70.1497 103.1111,70.6867 107.6101,70.6867 C108.0371,70.6867 108.4641,69.6127 108.4641,68.7577 C108.4641,68.0067 108.0371,66.9367 107.6101,66.8327 C103.0041,66.3997 102.2551,64.5797 102.2551,57.8357 L102.2551,35.7727 C104.9311,31.9177 107.5021,29.7797 112.5351,29.7797 C118.6371,29.7797 120.3521,33.6347 120.3521,40.4877 L120.3521,57.8357 C120.3521,64.5797 119.6031,66.3997 115.1041,66.8327 C114.5701,66.9367 114.2481,68.0067 114.2481,68.7577 C114.2481,69.6127 114.5701,70.6867 115.1041,70.6867 C119.6031,70.6867 122.8161,70.1497 127.9561,70.1497 C133.0961,70.1497 136.9511,70.6867 141.4481,70.6867 L141.6811,70.6867 C146.1771,70.6867 150.4611,70.1497 155.6011,70.1497 C160.7421,70.1497 165.6671,70.6867 170.1641,70.6867 C170.5951,70.6867 171.0221,69.6127 171.0221,68.7577 C171.0221,68.0067 170.5951,66.9367 170.1641,66.8327" id="Fill-5"></path>
<path d="M192.0862,72.2936 C185.1252,72.2936 181.5922,69.8266 176.1312,69.8266 C175.7032,66.0816 174.8452,59.5466 174.3102,56.7666 C174.2032,56.3336 175.3802,55.9056 176.1312,55.9056 C176.9862,55.9056 177.9512,56.2296 178.1652,56.7666 C180.4132,62.9736 186.0902,68.0066 191.6582,68.0066 C196.4782,68.0066 199.0462,65.2266 199.0462,60.6206 C199.0462,50.6586 175.1662,52.5886 175.1662,36.7376 C175.1662,28.2776 184.2702,21.9606 194.0132,21.9606 C199.7972,21.9606 204.2942,23.9956 207.8272,23.9956 C207.9342,27.7456 208.1502,32.8826 208.4712,35.9916 C208.4712,36.5236 207.2932,36.8466 206.5442,36.8466 C205.6862,36.8466 204.7242,36.6326 204.6142,35.9916 C203.4382,30.2076 199.3672,26.2436 194.8712,26.2436 C189.9452,26.2436 187.3732,28.4916 187.3732,32.5646 C187.3732,42.3076 211.6842,41.7706 211.6842,55.9056 C211.6842,65.5446 203.2242,72.2936 192.0862,72.2936" id="Fill-7"></path>
<path d="M232.6671,72.2936 C225.7061,72.2936 222.1731,69.8266 216.7121,69.8266 C216.2841,66.0816 215.4261,59.5466 214.8911,56.7666 C214.7841,56.3336 215.9611,55.9056 216.7121,55.9056 C217.5671,55.9056 218.5321,56.2296 218.7461,56.7666 C220.9941,62.9736 226.6711,68.0066 232.2391,68.0066 C237.0611,68.0066 239.6271,65.2266 239.6271,60.6206 C239.6271,50.6586 215.7471,52.5886 215.7471,36.7376 C215.7471,28.2776 224.8511,21.9606 234.5941,21.9606 C240.3781,21.9606 244.8751,23.9956 248.4111,23.9956 C248.5151,27.7456 248.7341,32.8826 249.0521,35.9916 C249.0521,36.5236 247.8741,36.8466 247.1271,36.8466 C246.2671,36.8466 245.3071,36.6326 245.1981,35.9916 C244.0191,30.2076 239.9511,26.2436 235.4551,26.2436 C230.5261,26.2436 227.9551,28.4916 227.9551,32.5646 C227.9551,42.3076 252.2651,41.7706 252.2651,55.9056 C252.2651,65.5446 243.8051,72.2936 232.6671,72.2936" id="Fill-9"></path>
<path d="M417.3705,42.7358 L387.9215,42.7358 C387.8125,44.1288 387.7035,45.9488 387.7035,47.8738 C387.7035,59.7608 392.9555,64.7938 401.3055,64.7938 C406.9805,64.7938 413.2975,61.4758 416.0825,57.8358 C416.4055,57.4078 418.3305,58.8008 418.3305,60.2978 C418.3305,60.6208 418.2255,60.8348 418.0125,61.1528 C414.5855,66.1858 407.8365,72.2938 397.5555,72.2938 C383.4215,72.2938 372.6085,61.2628 372.6085,47.6598 C372.6085,33.6338 382.3515,22.0658 397.5555,22.0658 C411.5865,22.0658 419.4045,31.8138 419.4045,41.2388 C419.4045,42.1988 418.5495,42.7358 417.3705,42.7358 M397.7695,26.2438 C392.5225,26.2438 389.4195,31.4908 388.4545,38.7718 L400.2365,38.4538 C404.5185,38.3438 405.5885,37.3798 405.5885,34.8128 C405.5885,30.0978 402.8025,26.2438 397.7695,26.2438" id="Fill-11"></path>
<path d="M441.8253,72.2936 C434.8623,72.2936 431.3263,69.8266 425.8653,69.8266 C425.4373,66.0816 424.5823,59.5466 424.0453,56.7666 C423.9403,56.3336 425.1193,55.9056 425.8653,55.9056 C426.7253,55.9056 427.6853,56.2296 427.9043,56.7666 C430.1523,62.9736 435.8273,68.0066 441.3933,68.0066 C446.2123,68.0066 448.7833,65.2266 448.7833,60.6206 C448.7833,50.6586 424.9053,52.5886 424.9053,36.7376 C424.9053,28.2776 434.0073,21.9606 443.7503,21.9606 C449.5343,21.9606 454.0303,23.9956 457.5663,23.9956 C457.6713,27.7456 457.8853,32.8826 458.2083,35.9916 C458.2083,36.5236 457.0293,36.8466 456.2783,36.8466 C455.4233,36.8466 454.4583,36.6326 454.3543,35.9916 C453.1753,30.2076 449.1063,26.2436 444.6063,26.2436 C439.6813,26.2436 437.1103,28.4916 437.1103,32.5646 C437.1103,42.3076 461.4213,41.7706 461.4213,55.9056 C461.4213,65.5446 452.9613,72.2936 441.8253,72.2936" id="Fill-13"></path>
<path d="M373.1439,66.8327 C367.3649,66.1867 365.8629,64.6887 365.8629,57.8357 L365.8629,41.0207 C365.8629,35.4547 366.3999,27.0987 366.7179,22.7117 C366.7179,22.0657 366.0769,21.5337 364.7929,21.5337 C363.9329,21.5337 363.2909,22.1747 362.8639,22.3887 C358.6859,24.8507 351.2999,27.7457 345.3019,29.0287 C344.8739,29.0287 344.4459,30.0977 344.4459,30.8487 C344.4459,31.5997 344.8739,32.5647 345.3019,32.6687 C350.4449,33.0967 351.9419,34.2757 351.9419,39.9507 L351.9419,57.8357 C351.9419,64.6887 350.3349,66.1867 344.6599,66.8327 C344.2329,66.9367 343.8049,68.0067 343.8049,68.7577 C343.8049,69.6127 344.2329,70.6867 344.6599,70.6867 C349.1569,70.6867 353.4389,70.1497 358.5809,70.1497 C363.7189,70.1497 368.6479,70.6867 373.1439,70.6867 C373.5719,70.6867 373.9999,69.6127 373.9999,68.7577 C373.9999,68.0067 373.5719,66.9367 373.1439,66.8327" id="Fill-16"></path>
<path d="M345.7711,11.5043 C346.0031,11.3583 346.7451,10.9793 346.8791,10.9123 C348.2401,10.3613 349.6791,10.3153 350.9921,11.1003 C351.9161,11.6173 352.5411,12.4153 352.7581,12.6773 C352.8021,12.7343 353.2031,13.1973 353.3961,13.3943 L353.4031,13.3873 C354.5231,14.4833 356.2221,15.4013 358.8151,15.4013 C362.9901,15.4013 366.4171,11.8653 366.4171,7.5823 C366.4171,3.7333 363.4991,0.5553 359.7751,0.0743 C359.5201,0.0213 358.6581,0.0153 358.5381,0.0263 C339.7251,0.5453 330.5971,24.4463 328.5691,29.8063 L329.1071,22.4983 C329.1071,21.8513 328.3551,21.3193 327.0721,21.3193 C326.2171,21.3193 325.5751,21.9613 325.1431,22.1753 C321.2881,24.5323 313.8971,27.3123 308.8641,28.6003 C308.4361,28.6003 308.0091,29.6703 308.0091,30.4213 C308.0091,31.1723 308.4361,32.1323 308.8641,32.1323 C314.0071,32.6693 314.8621,33.8483 314.8621,39.5223 L314.8621,57.8353 C314.8621,64.6893 313.8971,66.0813 307.5811,66.8323 C307.1531,66.9373 306.7251,67.9023 306.7251,68.7573 C306.7251,69.6133 307.1531,70.6873 307.5811,70.6873 C312.0771,70.6873 316.7921,70.0403 321.8251,70.0403 C326.9631,70.0403 332.6421,70.6873 337.1391,70.6873 C337.5661,70.6873 337.9941,69.6133 337.9941,68.7573 C337.9941,67.9023 337.5661,66.9373 337.1391,66.8323 C330.9271,66.0813 328.7831,64.6893 328.7831,57.8353 L328.7831,43.6513 C328.7831,37.9853 335.9151,17.6533 345.7711,11.5043" id="Fill-18"></path>
<path d="M303.2971,67.1701 C302.9331,66.4061 302.1351,65.7281 301.7041,65.8191 C301.6181,65.8481 301.5471,65.8651 301.4631,65.8931 C301.4601,65.8941 301.4581,65.8951 301.4581,65.8951 C301.0931,65.9871 300.7111,66.0401 300.3081,66.0401 C299.2891,66.0401 298.4521,65.7101 297.8151,65.0631 C296.8271,64.0511 296.3541,61.7221 296.4051,59.2221 L297.0491,37.9091 C297.2121,32.7221 296.0001,28.7601 293.4531,26.1311 C291.0051,23.6071 287.3301,22.3281 282.5321,22.3281 C271.2271,22.3281 257.8441,29.6151 257.8441,35.7741 C257.8441,39.1411 260.1901,41.4021 263.6841,41.4021 C268.4451,41.4021 270.9511,38.3311 271.3461,32.0111 C271.4581,28.6891 275.0101,26.9451 278.4591,26.9451 C280.1931,26.9451 281.5721,27.4581 282.5591,28.4661 C283.7721,29.7071 284.3541,31.6631 284.2931,34.2821 L283.9621,43.9121 L283.7651,43.9561 C271.7651,46.7281 255.8081,51.5641 255.8081,61.4761 C255.8081,67.6911 260.9391,72.0331 268.2881,72.0331 C274.9081,72.0331 280.1321,69.8091 283.3941,65.5971 L283.7041,65.1981 L283.8501,65.6781 C285.0491,69.5871 288.5191,71.9201 293.1331,71.9201 C296.7671,71.9201 300.5811,71.2251 303.3001,69.2831 C303.3241,69.2661 303.3441,69.2471 303.3671,69.2301 C303.7191,69.0011 303.6511,67.9131 303.2971,67.1701 L303.2971,67.1701 Z M283.8641,47.4571 L283.4381,60.0941 C282.4401,64.2041 278.7151,66.0191 275.4631,66.0191 C271.7441,66.0191 269.5241,63.4001 269.5241,59.0141 C269.5241,51.6011 276.6101,48.8801 283.5401,47.1911 L283.8741,47.1091 L283.8641,47.4571 Z" id="Fill-20"></path>
</g>
</g>
</svg>
I have tried some options such as:
#emissaries-logo {
fill: $dark-gray !important;
}
svg ~ g {
fill: $dark-gray !important;
}
but none of them worked. Any idea?
You can't actually style <g> elements (though I've read somewhere there are some exceptions), since they're only meant to group children. To my knowledge, I guess you could use<rect>:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>emissaries-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="emissaries-logo" fill="#FFFFFF">
<rect fill="#A9A9A9" d="M44.762,42.7358 ...." />
//and so on
</g>
</g>
</svg>