I have a fixed footer on the following website;
https://sen-seis.com/dev/
I would like to be able to change the contents of the footer if the website is accessed from a mobile phone.
Is there a way to amend the footer.php file to only display certain parts of the footer if using the mobile. The code is;
<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
<table width="80%" border="0px" align="center">
<tr border="0px">
<td width="25%"><div class="site-info">
Copyright <?php echo date('Y'); ?> © Sen Seis. All rights reserved
</div><!-- .site-info -->
<!-- .site-info --> </td>
<td width="20%"> <div class="contact-email" ><span><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#069146" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </svg></i></span> <b> info#sen-seis.com</b> </div>
</td>
<td>
<a href="https://www.facebook.com/relaxmymuscles/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg> </a href>
<a href="https://www.instagram.com/senseis._/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg> </a href>
<a href="https://www.google.com/maps/place/Sen-Seis+Massage+Therapy/#51.5969996,-0.284717,15z/data=!4m5!3m4!1s0x0:0x62567b567dd73a63!8m2!3d51.5970056!4d-0.2847197">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="none" stroke="#069146" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>
</a>
<a href="https://wa.me/447368647489">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm.14 4.5a7.34 7.34 0 0 0-6.46 10.82l.15.26L4.5 19.5l4.08-1.3a7.38 7.38 0 0 0 10.92-6.4c0-4.03-3.3-7.3-7.36-7.3zm0 1.16c3.41 0 6.19 2.76 6.19 6.15a6.17 6.17 0 0 1-9.37 5.27l-.23-.15-2.38.76.77-2.28a6.08 6.08 0 0 1-1.17-3.6 6.17 6.17 0 0 1 6.19-6.15zM9.66 8.47a.67.67 0 0 0-.48.23l-.14.15c-.2.23-.5.65-.5 1.34 0 .72.43 1.41.64 1.71l.14.2a7.26 7.26 0 0 0 3.04 2.65l.4.14c1.44.54 1.47.33 1.77.3.33-.03 1.07-.43 1.22-.85.15-.42.15-.78.1-.85-.02-.05-.08-.08-.15-.12l-1.12-.54a5.15 5.15 0 0 0-.3-.13c-.17-.06-.3-.1-.41.09-.12.18-.47.58-.57.7-.1.1-.18.13-.32.08l-.4-.18a4.64 4.64 0 0 1-2.13-1.98c-.1-.18-.01-.28.08-.37l.27-.31c.1-.1.12-.18.18-.3a.3.3 0 0 0 .01-.26l-.1-.23-.48-1.15c-.15-.36-.3-.3-.4-.3l-.35-.02z"/></svg>
</a>
</td>
</tr>
</table>
</footer><!-- #colophon -->
Yo
Tty this
#media screen and (max-width:1200) {
.texttohide {
display : none;
}
}
<div>
<span class="textodisplayallthetime">BLABLABLA</span>
<span class="texttohide">this text will be hidden if the width of the device is under 1200 px, this should work for the majority of the cellphone</span>
</div>
Related
I have unordered list of social icons under DIV tags. I would like to wrap DIV to its content and center, for this purpose I used flex-wrap and mx-auto however DIV still occupies full screen size and its content is not centered.
<div class="flex-wrap mx-auto">
<ul class="hidden sm:inline-flex gap-4 py-2 px-5" >
<li><a href="http://www.twitter.com">
<svg aria-hidden="true" focusable="false" data-prefix="far" class="w-5 h-5 transition ease-in-out delay-30 fill-A200 hover:scale-110 hover:fill-G50 duration-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
</li>
<li><a href="http://www.instagram.com">
<svg aria-hidden="true" focusable="false" data-prefix="far" class="w-5 h-5 transition ease-in-out delay-30 fill-A200 hover:scale-110 hover:fill-G50 duration-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill-rule="nonzero" d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"></path>
</svg>
</a>
</li>
<li><a href="http://www.youtube.com">
<svg aria-hidden="true" focusable="false" data-prefix="far" class="w-5 h-5 transition ease-in-out delay-30 fill-A200 hover:scale-110 hover:fill-G50 duration-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"></path>
</svg>
</a>
</li>
<li><a href="http://www.tiktok.com">
<svg aria-hidden="true" focusable="false" data-prefix="far" class="w-5 h-5 transition ease-in-out delay-30 fill-A200 hover:scale-110 hover:fill-G50 duration-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z"></path>
</svg>
</a>
</li>
<li><a href="http://www.facebook.com">
<svg aria-hidden="true" focusable="false" data-prefix="far" class="w-5 h-5 transition ease-in-out delay-30 fill-A200 hover:scale-110 hover:fill-G50 duration-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg>
</a>
</li>
</ul>
</div>
Please, advice how can I make DIV centered on the screen?
Solution 1:
Add w-fit to the div container.
Solution 2:
Add flex and justify-center classes to the div container.
PS: in both cases you don't need flex-wrap class
Output:
I put two icons from Material UI Icons in a row. The heights themselves are same: 24px. But the height of path is different. One is 18px and the other is 22px. They don't look cool.
How can I adjust the height? I mean "the height that users see".
import {
Delete,
FileCopy
} from "#material-ui/icons";
...
<Box display="flex">
<FileCopy onClick={handleCopy} />
<Delete onClick={handleDelete} />
</Box>
I tried setting the the height of SVG, it made vertical align ugly...
The icons have a fontSize property - e.g. <HomeIcon fontSize="large" />.
You can also set it explicitly - <DeleteIcon style={{fontSize: "10px"}}/>.
It's tough to answer this question without more context of the components and what you can pass to them and what is being returned from them.
Assuming <FileCopy /> is returning an SVG element that you can pass valid svg properties to, the correct way to adjust the size would be to pass it height and width attributes.
<FileCopy height='48' width='48' />
Another way to think about this is the svgs likely have a viewBox that acts as a canvas. The height and width properties of the svg will change the size of the viewBox/canvas with the icon/paths inside it scaling along with it.
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='24' width='24'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='48' width='48'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>
I have an SVG. When the user hovers over it I want to change the fill colour on the path. Can someone explain why this isn't working?
svg:hover {
fill: blue;
}
<svg width="0" height="0" class="hidden">
<symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
<title>twitter</title>
<g fill="none" fill-rule="evenodd">
<path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z" fill="#AEB2B4"></path>
<path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
fill="#FFF" fill-rule="nonzero"></path>
</g>
</symbol>
</svg>
<svg class="icon">
<use xlink:href="#twitter"></use>
</svg>
svg:hover {
fill: blue;
}
svg {
fill: #AEB2B4;
}
<svg width="0" height="0" class="hidden">
<symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
<title>twitter</title>
<g>
<path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z""></path>
<path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
fill="#FFF" fill-rule="nonzero"></path>
</g>
</symbol>
</svg>
<svg class="icon">
<use xlink:href="#twitter"></use>
</svg>
Css priority
When you defined a fill on a <path> element and on the svg svg:hover.
The path element inline style takes priority over the one defined on the svg.
I think you need to match the svg element, eg:
path:hover {
fill: blue;
}
I created a SVG animation that works perfectly in Chrome but on Firefox and Safari, the scale animation goes all over the place. I've tweaked to where it'll work in Chrome and Firefox, but not Safari. It seems like it has something to do with transform-origin not working for all browsers even though I am using coordinates pixel values. I've tried transform-box:fill-box which is what seems to help in Firefox but not in Safari.
I also tried adding translate to the keyframes to the same coordinates used in transform-origin. That tends to work in Firefox but not in the other browsers
Is there a solution here that would work for all three browsers?
body {
background-color: #3D085F;
}
#Icon_Dot {
animation-name: iconDot;
animation-duration: .25s;
animation-delay: 2.1s;
opacity: 0;
animation-fill-mode: forwards;
transform-origin: 542.45px 110.3px;
}
#Circle_2, #Circke_3, #Circle_1 {
transform-origin: 930px 379px;
opacity: 0;
}
#Circke_3 {
animation-name:rings;
animation-duration: .8s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#Circle_2 {
animation-name:rings;
animation-duration: 1s;
animation-delay: .6s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#Circle_1 {
animation-name: rings;
animation-duration: 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#keyframes iconDot {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity:1;
}
to {
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity:1;
}
}
#keyframes rings {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity: 1;
}
to {
transform:scale(1 1);
-ms-transform: scale(1 1);
-webkit-transform: scale(1 1);
opacity:1;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125.53 553.74">
<defs>
<style>
.cls-1,.cls-16,.cls-7{fill:none}.cls-3{fill:#fff}.cls-16,.cls-7{stroke:#fff;stroke-miterlimit:10}.cls-7{stroke-width:31px}.cls-16{stroke-width:21px}
</style>
<clipPath id="clip-path" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M420.39 706.42a6.49 6.49 0 0 1-6.49-6.49V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49v142.82a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M593.49 706.42a9.6 9.6 0 0 1-7.12-3.15L485.59 592.42a6.49 6.49 0 0 0-11.29 4.36v103.15a6.5 6.5 0 0 1-6.5 6.49 6.5 6.5 0 0 1-6.49-6.49V550.62a9.13 9.13 0 0 1 6.77 3l101.14 110.66a6.49 6.49 0 0 0 11.28-4.38V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M774 657.54V700a6.47 6.47 0 0 1-6.47 6.46A6.46 6.46 0 0 1 761 700V557.09a6.47 6.47 0 0 1 6.46-6.47h61.64c29 0 49.38 20.86 49.38 50.45 0 22.94-11.64 40.74-33.44 47.5a6.48 6.48 0 0 0-3.44 10l27.15 37.63a6.47 6.47 0 0 1-5.24 10.25 6.46 6.46 0 0 1-5.27-2.72l-35.51-49.9a6.44 6.44 0 0 0-5.26-2.72h-37a6.46 6.46 0 0 0-6.47 6.43zm0-24.84a6.46 6.46 0 0 0 6.46 6.46h46.74c18.1 0 38.32-11.07 38.32-38.09 0-13.63-7-39-38.32-39h-46.74a6.46 6.46 0 0 0-6.46 6.46z"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M918.84 706.42a6.5 6.5 0 0 1-6.49-6.49V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49v142.82a6.5 6.5 0 0 1-6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1098 706.42h-1.39a6.48 6.48 0 0 1-4.8-2.13L990.06 592.42a6.49 6.49 0 0 0-11.3 4.36v103.15a6.49 6.49 0 0 1-6.49 6.49 6.49 6.49 0 0 1-6.49-6.49V550.62H967a6.51 6.51 0 0 1 4.79 2.11l101.93 111.55a6.5 6.5 0 0 0 11.28-4.38V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1137.22 686.32a6.05 6.05 0 0 1 8.3-1.93 90.28 90.28 0 0 0 47.58 13.94c27.89 0 43.21-12.77 43.21-32.35 0-22.56-22.78-27.67-47.46-32.56-17.46-3.41-56.83-7.67-56.83-41.08s30.65-44.48 54.91-44.48a87.49 87.49 0 0 1 44.39 11.62 6.08 6.08 0 0 1 2.13 8.52 6.06 6.06 0 0 1-8 2.11c-13.2-7.22-25.57-10.76-40-10.76-15.11 0-40.65 9.36-40.65 32.35 0 24 34.48 27.24 55.76 31.29 18.09 3.4 48.53 10.43 48.53 43.2 0 29.16-22.56 43.63-55.34 43.63-23.87 0-40.83-6.07-54.77-14.91a6.09 6.09 0 0 1-1.87-8.4z"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1286.23 706.42a6.5 6.5 0 0 1-6.5-6.49V557.12a6.5 6.5 0 0 1 6.5-6.5 6.5 6.5 0 0 1 6.49 6.5v142.81a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1458.3 582.46a6.39 6.39 0 0 1-7.79-1.53 64.67 64.67 0 0 0-47.75-21.8c-36.18 0-65.77 32.14-65.77 69.6s29.59 69.17 65.77 69.17c21.94 0 36.31-7.57 47.91-21.06a6.37 6.37 0 0 1 7.42-1.63h.11a6.43 6.43 0 0 1 2.27 10c-12.39 14.8-30 24.54-57.71 24.54-43.63 0-78.75-36.39-78.75-81.09s35.12-81.09 78.75-81.09c25.56 0 44.15 9.46 57.38 24.86a6.44 6.44 0 0 1-1.84 10z"/>
</clipPath>
<clipPath id="clip-path-9" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M727.37 562.12h-37.88a5.74 5.74 0 0 0-5.75 5.74v132.81a5.74 5.74 0 0 1-5.75 5.75h-1.48a5.74 5.74 0 0 1-5.75-5.75V567.86a5.74 5.74 0 0 0-5.75-5.74h-37.24a5.75 5.75 0 0 1-5.75-5.75 5.74 5.74 0 0 1 5.75-5.75h99.6a5.74 5.74 0 0 1 5.75 5.75 5.75 5.75 0 0 1-5.75 5.75z"/>
</clipPath>
<clipPath id="clip-path-10" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1482.62 549.92h-6.23v18.37h-2.61v-18.37h-6.27v-2.2h15.11z"/>
</clipPath>
<clipPath id="clip-path-11" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1485.24 568.29v-20.57h.45l9.72 12 9.74-12h.45v20.57h-2.6v-13.82l-7.61 9.52-7.56-9.52v13.82z"/>
</clipPath>
<clipPath id="clip-path-12" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M794.26 752.84c0-2.1 1.69-3.62 4.13-3.62h1.34c2.94 0 3.7 1.35 5 4.29L819 785.22l14.38-31.71c1.27-2.94 2-4.29 5-4.29h1.17c2.44 0 4.12 1.52 4.12 3.62v48.87c0 1.76-.75 2.6-2.43 2.6h-.68c-1.6 0-2.35-.84-2.35-2.6v-45.93l-14.3 31c-1 2.27-2.19 3.61-5 3.61s-4-1.34-5-3.61l-14.22-31v45.93c0 1.76-.67 2.6-2.35 2.6h-.84c-1.6 0-2.28-.84-2.28-2.6z"/>
</clipPath>
<clipPath id="clip-path-13" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M881.83 752.76a3.19 3.19 0 0 1 3.19-3.2h32.55c1.68 0 2.61.84 2.61 2.35v.51c0 1.6-.93 2.36-2.61 2.36h-30v18.75h24.03c1.68 0 2.61.84 2.61 2.36v.33c0 1.6-.93 2.36-2.61 2.36h-24.06v20.18h30.54c1.68 0 2.6.76 2.6 2.27v.51c0 1.6-.92 2.44-2.6 2.44H885a3.19 3.19 0 0 1-3.19-3.2z"/>
</clipPath>
<clipPath id="clip-path-14" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M955.51 752.76a3.19 3.19 0 0 1 3.19-3.2h12.87c18.76 0 29.77 10 29.77 27.08S990.08 804 971.15 804H958.7a3.19 3.19 0 0 1-3.19-3.2zm16 46.17c15.31 0 24-8.07 24-22.12 0-13.88-8.92-22.21-23.89-22.21h-10.39v44.33z"/>
</clipPath>
<clipPath id="clip-path-15" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1038.11 751.83c0-1.68.84-2.61 2.43-2.61h.76a2.29 2.29 0 0 1 2.52 2.61v49.88c0 1.76-.84 2.6-2.52 2.6h-.76c-1.59 0-2.43-.84-2.43-2.6z"/>
</clipPath>
<clipPath id="clip-path-16" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1097.65 751.16c.59-1.43 1.6-2.11 4.29-2.11s3.7.68 4.29 2.11l19.94 51.47c.16.42-1.52 1.68-3.28 1.68a3.49 3.49 0 0 1-3.45-2.6l-6-15.48h-23.39l-5.88 15.48c-.76 2-2 2.6-3.28 2.6-1.69 0-3.37-1.26-3.2-1.68zm14 30l-9.85-25.57-9.83 25.57z"/>
</clipPath> </defs>
<g id="Icon">
<path id="Circke_3" data-name="Circke 3" class="cls-3" d="M958.7 333.84c32.57 1.46 56.66 32.38 44.85 64.42-12.24 33.23-53.33 40.51-78.75 17.41-4-3.68-10.08 2.32-6 6 29.51 26.82 78.07 19 92.72-20.06 14.06-37.49-14.41-74.58-52.81-76.3-5.48-.25-5.47 8.27 0 8.51z" transform="translate(-387.89 -257.76)"/>
<path id="Circle_2" data-name="Circle 2" d="M1024.26 441l-3.79-3.42a88.31 88.31 0 0 0 6.2-7.69l4.19 2.92a91.24 91.24 0 0 1-6.6 8.19zm15.38-24.89l-4.78-1.8c-.62 1.51-1.15 3.06-1.85 4.54l-2.24 4.38 4.47 2.46 2.41-4.69c.75-1.6 1.35-3.27 1.99-4.9zm4-18.44l-5.1-.29-.11 2.41-.39 2.4a43.22 43.22 0 0 1-.89 4.78l5 1.19a50.84 50.84 0 0 0 1-5.21l.42-2.63zm-58.18 67.27l-1.18-5c-1.56.45-3.19.57-4.78.87l-2.39.39-2.42.09.27 5.1 2.66-.11 2.62-.41c1.76-.31 3.53-.46 5.23-.94zm17.59-6.93l-2.48-4.47-4.36 2.26c-1.49.69-3 1.23-4.54 1.86l1.8 4.78c1.63-.67 3.3-1.27 4.89-2zm15.22-11l-3.43-3.78a84.68 84.68 0 0 1-7.67 6.22l2.93 4.18a88.13 88.13 0 0 0 8.18-6.63zM959 461.36c-68.6-1.91-106.38-85.72-56.26-135.84s133.93-12.33 135.85 56.26c.15 5.46 8.66 5.48 8.51 0-2.12-75.94-94.9-117.76-150.38-62.28S883 467.76 959 469.88c5.48.15 5.47-8.36 0-8.52z" transform="translate(-387.89 -257.76)" fill-rule="evenodd" fill="#fff"/>
<path id="Circle_1" data-name="Circle 1" class="cls-3" d="M959 266.27c-5.48-.1-5.48-8.61 0-8.51 83.78 1.62 145.63 85 116.88 165.54-30.18 84.56-137.77 107.61-202.78 47.92-4-3.71 2-9.72 6-6 61.64 56.6 164.26 32.7 190-48.41 23.61-74.45-33.47-149-110.1-150.52zM837.29 406l10.1-1.55a146.73 146.73 0 0 1-1.45-15.61l-10.2.4a157.69 157.69 0 0 0 1.55 16.76zm8.71 29.11l9.23-4.38a83.2 83.2 0 0 1-5.3-14.31l-9.85 2.72a94.6 94.6 0 0 0 5.92 15.97zm17.15 25.05l7.48-7a97.85 97.85 0 0 1-9.52-12l-8.51 5.65a107.08 107.08 0 0 0 10.58 13.35zm-10.27-142l8.84 5.13c2.42-4.61 5.62-8.71 8.58-13l-8.09-6.24c-3.21 4.65-6.65 9.13-9.3 14.12zM840.8 345.9l9.79 2.91c.75-2.48 1.71-4.9 2.55-7.35l1.3-3.67 1.64-3.52-9.32-4.18-1.76 3.85-1.42 4c-.9 2.64-1.94 5.27-2.75 7.97zm-5 29.75l10.2.5a71.57 71.57 0 0 1 .57-7.75l1.15-7.68-10-1.86-1.26 8.36a81.78 81.78 0 0 0-.58 8.44zm86.51-113.2l2.68 9.85a48.82 48.82 0 0 1 7.43-1.64l3.74-.68c1.24-.22 2.51-.19 3.77-.29l-.81-10.18c-1.42.12-2.86.1-4.27.34l-4.21.75a57.31 57.31 0 0 0-8.25 1.86zm-27.84 12.23l5.4 8.67c2.14-1.44 4.49-2.49 6.72-3.77 1.14-.59 2.24-1.27 3.41-1.8l3.54-1.47-4-9.4-3.93 1.64c-1.29.58-2.5 1.32-3.76 2-2.36 1.38-4.95 2.57-7.3 4.14zm-23.4 19.09l7.38 7.07 5.54-5.45c1.89-1.77 4-3.3 5.95-5l-6.34-8c-2.16 1.82-4.44 3.5-6.49 5.44z" transform="translate(-387.89 -257.76)"/>
</g>
<circle cx="542.45" cy="110.3" r="19.07" fill="#daa900" id="Icon_Dot" data-name="Icon Dot"/>
</svg>
Your problem is that the elements you are transforming, have a transform on them already. The animated scale() you are applying is overwriting the translate() that is already on them.
The fact that the browsers are handling this combination of transform change and transform-origin differently is a bug, and also a red herring.
What I have done below is move the existing transform to the parent group, and removed the transform-origin properties from the child elements.
<g id="Icon" transform="translate(-387.89 -257.76)">
<path id="Circke_3" />
<path id="Circle_2" />
<path id="Circle_1" />
</g>
The below example, now works correctly on both Chrome and Firefox. Unfortunately, I don't have access to a Mac right now, so I can't test Safari. But I hope that fixing the underlying problem will make this work there also.
body {
background-color: #3D085F;
}
#Icon_Dot {
animation-name: iconDot;
animation-duration: .25s;
animation-delay: 2.1s;
opacity: 0;
animation-fill-mode: forwards;
transform-origin: 542.45px 110.3px;
}
#Circle_2, #Circke_3, #Circle_1 {
transform-origin: 930px 379px;
opacity: 0;
}
#Circke_3 {
animation-name:rings;
animation-duration: .8s;
animation-fill-mode: forwards;
}
#Circle_2 {
animation-name:rings;
animation-duration: 1s;
animation-delay: .6s;
animation-fill-mode: forwards;
}
#Circle_1 {
animation-name: rings;
animation-duration: 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
}
#keyframes iconDot {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity:1;
}
to {
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity:1;
}
}
#keyframes rings {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity: 1;
}
to {
transform:scale(1 1);
-ms-transform: scale(1 1);
-webkit-transform: scale(1 1);
opacity:1;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125.53 553.74">
<defs>
<style>
.cls-1,.cls-16,.cls-7{fill:none}.cls-3{fill:#fff}.cls-16,.cls-7{stroke:#fff;stroke-miterlimit:10}.cls-7{stroke-width:31px}.cls-16{stroke-width:21px}
</style>
<clipPath id="clip-path" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M420.39 706.42a6.49 6.49 0 0 1-6.49-6.49V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49v142.82a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M593.49 706.42a9.6 9.6 0 0 1-7.12-3.15L485.59 592.42a6.49 6.49 0 0 0-11.29 4.36v103.15a6.5 6.5 0 0 1-6.5 6.49 6.5 6.5 0 0 1-6.49-6.49V550.62a9.13 9.13 0 0 1 6.77 3l101.14 110.66a6.49 6.49 0 0 0 11.28-4.38V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M774 657.54V700a6.47 6.47 0 0 1-6.47 6.46A6.46 6.46 0 0 1 761 700V557.09a6.47 6.47 0 0 1 6.46-6.47h61.64c29 0 49.38 20.86 49.38 50.45 0 22.94-11.64 40.74-33.44 47.5a6.48 6.48 0 0 0-3.44 10l27.15 37.63a6.47 6.47 0 0 1-5.24 10.25 6.46 6.46 0 0 1-5.27-2.72l-35.51-49.9a6.44 6.44 0 0 0-5.26-2.72h-37a6.46 6.46 0 0 0-6.47 6.43zm0-24.84a6.46 6.46 0 0 0 6.46 6.46h46.74c18.1 0 38.32-11.07 38.32-38.09 0-13.63-7-39-38.32-39h-46.74a6.46 6.46 0 0 0-6.46 6.46z"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M918.84 706.42a6.5 6.5 0 0 1-6.49-6.49V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49v142.82a6.5 6.5 0 0 1-6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1098 706.42h-1.39a6.48 6.48 0 0 1-4.8-2.13L990.06 592.42a6.49 6.49 0 0 0-11.3 4.36v103.15a6.49 6.49 0 0 1-6.49 6.49 6.49 6.49 0 0 1-6.49-6.49V550.62H967a6.51 6.51 0 0 1 4.79 2.11l101.93 111.55a6.5 6.5 0 0 0 11.28-4.38V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1137.22 686.32a6.05 6.05 0 0 1 8.3-1.93 90.28 90.28 0 0 0 47.58 13.94c27.89 0 43.21-12.77 43.21-32.35 0-22.56-22.78-27.67-47.46-32.56-17.46-3.41-56.83-7.67-56.83-41.08s30.65-44.48 54.91-44.48a87.49 87.49 0 0 1 44.39 11.62 6.08 6.08 0 0 1 2.13 8.52 6.06 6.06 0 0 1-8 2.11c-13.2-7.22-25.57-10.76-40-10.76-15.11 0-40.65 9.36-40.65 32.35 0 24 34.48 27.24 55.76 31.29 18.09 3.4 48.53 10.43 48.53 43.2 0 29.16-22.56 43.63-55.34 43.63-23.87 0-40.83-6.07-54.77-14.91a6.09 6.09 0 0 1-1.87-8.4z"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1286.23 706.42a6.5 6.5 0 0 1-6.5-6.49V557.12a6.5 6.5 0 0 1 6.5-6.5 6.5 6.5 0 0 1 6.49 6.5v142.81a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1458.3 582.46a6.39 6.39 0 0 1-7.79-1.53 64.67 64.67 0 0 0-47.75-21.8c-36.18 0-65.77 32.14-65.77 69.6s29.59 69.17 65.77 69.17c21.94 0 36.31-7.57 47.91-21.06a6.37 6.37 0 0 1 7.42-1.63h.11a6.43 6.43 0 0 1 2.27 10c-12.39 14.8-30 24.54-57.71 24.54-43.63 0-78.75-36.39-78.75-81.09s35.12-81.09 78.75-81.09c25.56 0 44.15 9.46 57.38 24.86a6.44 6.44 0 0 1-1.84 10z"/>
</clipPath>
<clipPath id="clip-path-9" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M727.37 562.12h-37.88a5.74 5.74 0 0 0-5.75 5.74v132.81a5.74 5.74 0 0 1-5.75 5.75h-1.48a5.74 5.74 0 0 1-5.75-5.75V567.86a5.74 5.74 0 0 0-5.75-5.74h-37.24a5.75 5.75 0 0 1-5.75-5.75 5.74 5.74 0 0 1 5.75-5.75h99.6a5.74 5.74 0 0 1 5.75 5.75 5.75 5.75 0 0 1-5.75 5.75z"/>
</clipPath>
<clipPath id="clip-path-10" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1482.62 549.92h-6.23v18.37h-2.61v-18.37h-6.27v-2.2h15.11z"/>
</clipPath>
<clipPath id="clip-path-11" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1485.24 568.29v-20.57h.45l9.72 12 9.74-12h.45v20.57h-2.6v-13.82l-7.61 9.52-7.56-9.52v13.82z"/>
</clipPath>
<clipPath id="clip-path-12" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M794.26 752.84c0-2.1 1.69-3.62 4.13-3.62h1.34c2.94 0 3.7 1.35 5 4.29L819 785.22l14.38-31.71c1.27-2.94 2-4.29 5-4.29h1.17c2.44 0 4.12 1.52 4.12 3.62v48.87c0 1.76-.75 2.6-2.43 2.6h-.68c-1.6 0-2.35-.84-2.35-2.6v-45.93l-14.3 31c-1 2.27-2.19 3.61-5 3.61s-4-1.34-5-3.61l-14.22-31v45.93c0 1.76-.67 2.6-2.35 2.6h-.84c-1.6 0-2.28-.84-2.28-2.6z"/>
</clipPath>
<clipPath id="clip-path-13" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M881.83 752.76a3.19 3.19 0 0 1 3.19-3.2h32.55c1.68 0 2.61.84 2.61 2.35v.51c0 1.6-.93 2.36-2.61 2.36h-30v18.75h24.03c1.68 0 2.61.84 2.61 2.36v.33c0 1.6-.93 2.36-2.61 2.36h-24.06v20.18h30.54c1.68 0 2.6.76 2.6 2.27v.51c0 1.6-.92 2.44-2.6 2.44H885a3.19 3.19 0 0 1-3.19-3.2z"/>
</clipPath>
<clipPath id="clip-path-14" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M955.51 752.76a3.19 3.19 0 0 1 3.19-3.2h12.87c18.76 0 29.77 10 29.77 27.08S990.08 804 971.15 804H958.7a3.19 3.19 0 0 1-3.19-3.2zm16 46.17c15.31 0 24-8.07 24-22.12 0-13.88-8.92-22.21-23.89-22.21h-10.39v44.33z"/>
</clipPath>
<clipPath id="clip-path-15" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1038.11 751.83c0-1.68.84-2.61 2.43-2.61h.76a2.29 2.29 0 0 1 2.52 2.61v49.88c0 1.76-.84 2.6-2.52 2.6h-.76c-1.59 0-2.43-.84-2.43-2.6z"/>
</clipPath>
<clipPath id="clip-path-16" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1097.65 751.16c.59-1.43 1.6-2.11 4.29-2.11s3.7.68 4.29 2.11l19.94 51.47c.16.42-1.52 1.68-3.28 1.68a3.49 3.49 0 0 1-3.45-2.6l-6-15.48h-23.39l-5.88 15.48c-.76 2-2 2.6-3.28 2.6-1.69 0-3.37-1.26-3.2-1.68zm14 30l-9.85-25.57-9.83 25.57z"/>
</clipPath> </defs>
<g id="Icon" transform="translate(-387.89 -257.76)">
<path id="Circke_3" data-name="Circke 3" class="cls-3" d="M958.7 333.84c32.57 1.46 56.66 32.38 44.85 64.42-12.24 33.23-53.33 40.51-78.75 17.41-4-3.68-10.08 2.32-6 6 29.51 26.82 78.07 19 92.72-20.06 14.06-37.49-14.41-74.58-52.81-76.3-5.48-.25-5.47 8.27 0 8.51z"/>
<path id="Circle_2" data-name="Circle 2" d="M1024.26 441l-3.79-3.42a88.31 88.31 0 0 0 6.2-7.69l4.19 2.92a91.24 91.24 0 0 1-6.6 8.19zm15.38-24.89l-4.78-1.8c-.62 1.51-1.15 3.06-1.85 4.54l-2.24 4.38 4.47 2.46 2.41-4.69c.75-1.6 1.35-3.27 1.99-4.9zm4-18.44l-5.1-.29-.11 2.41-.39 2.4a43.22 43.22 0 0 1-.89 4.78l5 1.19a50.84 50.84 0 0 0 1-5.21l.42-2.63zm-58.18 67.27l-1.18-5c-1.56.45-3.19.57-4.78.87l-2.39.39-2.42.09.27 5.1 2.66-.11 2.62-.41c1.76-.31 3.53-.46 5.23-.94zm17.59-6.93l-2.48-4.47-4.36 2.26c-1.49.69-3 1.23-4.54 1.86l1.8 4.78c1.63-.67 3.3-1.27 4.89-2zm15.22-11l-3.43-3.78a84.68 84.68 0 0 1-7.67 6.22l2.93 4.18a88.13 88.13 0 0 0 8.18-6.63zM959 461.36c-68.6-1.91-106.38-85.72-56.26-135.84s133.93-12.33 135.85 56.26c.15 5.46 8.66 5.48 8.51 0-2.12-75.94-94.9-117.76-150.38-62.28S883 467.76 959 469.88c5.48.15 5.47-8.36 0-8.52z" fill-rule="evenodd" fill="#fff"/>
<path id="Circle_1" data-name="Circle 1" class="cls-3" d="M959 266.27c-5.48-.1-5.48-8.61 0-8.51 83.78 1.62 145.63 85 116.88 165.54-30.18 84.56-137.77 107.61-202.78 47.92-4-3.71 2-9.72 6-6 61.64 56.6 164.26 32.7 190-48.41 23.61-74.45-33.47-149-110.1-150.52zM837.29 406l10.1-1.55a146.73 146.73 0 0 1-1.45-15.61l-10.2.4a157.69 157.69 0 0 0 1.55 16.76zm8.71 29.11l9.23-4.38a83.2 83.2 0 0 1-5.3-14.31l-9.85 2.72a94.6 94.6 0 0 0 5.92 15.97zm17.15 25.05l7.48-7a97.85 97.85 0 0 1-9.52-12l-8.51 5.65a107.08 107.08 0 0 0 10.58 13.35zm-10.27-142l8.84 5.13c2.42-4.61 5.62-8.71 8.58-13l-8.09-6.24c-3.21 4.65-6.65 9.13-9.3 14.12zM840.8 345.9l9.79 2.91c.75-2.48 1.71-4.9 2.55-7.35l1.3-3.67 1.64-3.52-9.32-4.18-1.76 3.85-1.42 4c-.9 2.64-1.94 5.27-2.75 7.97zm-5 29.75l10.2.5a71.57 71.57 0 0 1 .57-7.75l1.15-7.68-10-1.86-1.26 8.36a81.78 81.78 0 0 0-.58 8.44zm86.51-113.2l2.68 9.85a48.82 48.82 0 0 1 7.43-1.64l3.74-.68c1.24-.22 2.51-.19 3.77-.29l-.81-10.18c-1.42.12-2.86.1-4.27.34l-4.21.75a57.31 57.31 0 0 0-8.25 1.86zm-27.84 12.23l5.4 8.67c2.14-1.44 4.49-2.49 6.72-3.77 1.14-.59 2.24-1.27 3.41-1.8l3.54-1.47-4-9.4-3.93 1.64c-1.29.58-2.5 1.32-3.76 2-2.36 1.38-4.95 2.57-7.3 4.14zm-23.4 19.09l7.38 7.07 5.54-5.45c1.89-1.77 4-3.3 5.95-5l-6.34-8c-2.16 1.82-4.44 3.5-6.49 5.44z"/>
</g>
<circle cx="542.45" cy="110.3" r="19.07" fill="#daa900" id="Icon_Dot" data-name="Icon Dot"/>
</svg>
I'm trying to understand how the css styling is working inside an svg here is an exemple of an svg i'm using:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
<style>.cls-1{isolation:isolate;}.cls-2,.cls-3{fill:#ef8989;}.cls-3{mix-blend-mode:screen;}</style>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>
And here is how i'm trying to move the inline style to an external css file :
.cls-1 {
isolation : isolate;
}
.cls-3 {
mix-blend-mode : screen;
fill : #ef8989;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<g class="cls-1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/>
<polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</svg>
Obviously there is something I don't understand on how to translate inline style to CSS style, my guess is that my issue is around here: .cls-1{isolation:isolate;}.cls-2,
I must have something to specify for the class cls-2 but didn't manage to get my head around this.
Thanks for any clarification and sorry if the question has been already asked couldn't find anything about it.
Matth
You forgot .cls-2, for the fill color.
Coma separated selectors in CSS means they all get the following defined styles.
.cls-1{
isolation:isolate;
}
.cls-2,
.cls-3{
fill:#ef8989;
}
.cls-3{
mix-blend-mode:screen;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>