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:
Related
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>
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'm trying to show a hovered icon on hover.
I've added rules
.downloads-documentation__image:hover > svg:nth-child(1) {display:none;}
.downloads-documentation__image:hover > svg:nth-child(2) {display:block;}
It works on the first item in a list, but when I hover the second item it doesn't show hovered icon but hide hovered and not hovered icons.
In dev tools hovered element has display:block but i see no icon on hover.
*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
ul,li{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
a{text-decoration:none;color:#00D3FF;}
.downloads-documentation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:0px;margin-right:0px;}
#media only screen and (max-width: 991px){
.downloads-documentation__list{max-width:600px;margin-left:auto;margin-right:auto;}
}
.downloads-documentation__item{position:relative;width:calc(100% / 12 * 3 - 0px * 2);margin-left:0px;margin-right:0px;}
#media only screen and (max-width: 991px){
.downloads-documentation__item{width:calc(100% / 12 * 6 - 0px * 2);margin-left:0px;margin-right:0px;margin-bottom:30px;}
}
#media only screen and (max-width: 575px){
.downloads-documentation__item{width:calc(100% / 12 * 12 - 0px * 2);margin-left:0px;margin-right:0px;}
}
.downloads-documentation__item::before,.downloads-documentation__item::after{content:'';background-color:rgba(36, 171, 146, 0.3);position:absolute;width:1px;height:60px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
#media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
#media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
.downloads-documentation__item::before{left:0;}
#media only screen and (max-width: 575px){
.downloads-documentation__item::before{display:none;}
}
.downloads-documentation__item::after{right:0;}
#media only screen and (max-width: 480px){
.downloads-documentation__item::after{bottom:-18px;top:auto;right:auto;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:2px;width:100%;max-width:6rem;}
}
#media only screen and (min-width: 992px){
.downloads-documentation__item:first-child:before{display:none;}
.downloads-documentation__item:last-child:after{display:none;}
}
#media (min-width: 576px) and (max-width: 991px){
.downloads-documentation__item:nth-child(2n-1):before{display:none;}
.downloads-documentation__item:nth-child(2n):after{display:none;}
}
#media only screen and (max-width: 575px){
.downloads-documentation__item:last-child:after{display:none;}
}
.downloads-documentation__reference{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
#media only screen and (max-width: 991px){
.downloads-documentation__reference{font-size:16px;}
}
.downloads-documentation__image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90px;height:80px;margin-bottom:20px;}
.downloads-documentation__image svg{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg:nth-child(1){display:block;}
.downloads-documentation__image svg:nth-child(2){display:none;}
.downloads-documentation__image:hover{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image:hover svg:nth-child(1){display:none;}
.downloads-documentation__image:hover svg:nth-child(2){display:block;}
<ul class="downloads-documentation__list">
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_4" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
<g fill="#05E2C2" fill-rule="nonzero">
<path d="M69.149 10H12.85C11.28 10 10 11.295 10 12.887v37.346c0 1.592 1.28 2.887 2.851 2.887h19.177l-1.42 5.037H26.44a.916.916 0 0 0-.91.921c0 .51.408.922.91.922H55.56c.503 0 .91-.413.91-.922a.916.916 0 0 0-.91-.921h-4.166l-1.421-5.037h19.177c1.572 0 2.851-1.295 2.851-2.887V12.887C72 11.295 70.72 10 69.149 10zM49.5 58.157h-17l1.421-5.037H48.08l1.421 5.037zm20.68-7.924c0 .576-.463 1.044-1.031 1.044H12.85a1.039 1.039 0 0 1-1.031-1.044V12.887c0-.576.463-1.044 1.031-1.044H69.15c.568 0 1.031.468 1.031 1.044v37.346z"></path>
<path d="M67.094 14H14.906a.91.91 0 0 0-.906.915v33.17a.91.91 0 0 0 .906.915h52.188c.5 0 .906-.41.906-.915v-33.17a.91.91 0 0 0-.906-.915zm-.34 1.138v3H15.246v-3h51.508zM15.246 48.004v-29h51.508v29H15.246zM17.75 17.5a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75z"></path>
<path stroke="#05E2C2" stroke-width=".6" d="M50 33.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H46.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V37.79H50v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H33.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L36 29.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H48.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
<defs>
<filter id="a" width="151.6%" height="164%" x="-25.8%" y="-32%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="#05E2C2" fill-rule="nonzero" filter="url(#a)" transform="translate(10 10)">
<path d="M59.149 0H2.85C1.28 0 0 1.295 0 2.887v37.346c0 1.592 1.28 2.887 2.851 2.887h19.177l-1.42 5.037H16.44a.916.916 0 0 0-.91.921c0 .51.408.922.91.922H45.56c.503 0 .91-.413.91-.922a.916.916 0 0 0-.91-.921h-4.166l-1.421-5.037h19.177c1.572 0 2.851-1.295 2.851-2.887V2.887C62 1.295 60.72 0 59.149 0zM39.5 48.157h-17l1.421-5.037H38.08l1.421 5.037zm20.68-7.924c0 .576-.463 1.044-1.031 1.044H2.85a1.039 1.039 0 0 1-1.031-1.044V2.887c0-.576.463-1.044 1.031-1.044H59.15c.568 0 1.031.468 1.031 1.044v37.346z"></path>
<path d="M57.094 4H4.906A.91.91 0 0 0 4 4.915v33.17a.91.91 0 0 0 .906.915h52.188c.5 0 .906-.41.906-.915V4.915A.91.91 0 0 0 57.094 4zm-.34 1.138v3H5.246v-3h51.508zM5.246 38.004v-29h51.508v29H5.246zM7.75 7.5A.753.753 0 0 1 7 6.75.753.753 0 0 1 7.75 6a.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0A.753.753 0 0 1 9 6.75.753.753 0 0 1 9.75 6a.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75z"></path>
<path stroke="#05E2C2" stroke-width=".6" d="M40 23.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H36.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V27.79H40v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H23.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L26 19.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H38.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
</div>
Desktop Wallet App
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_1" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="76" viewBox="0 0 70 76">
<g fill="#05E2C2" fill-rule="nonzero">
<path d="M58.925 10H20.159a1.088 1.088 0 0 0-.767.305c-.205.198-.32.468-.323.75l-.259 42.857h-7.714a1.083 1.083 0 0 0-.77.3 1.052 1.052 0 0 0-.326.75v2.253c0 4.708 3.635 8.562 8.174 8.776v.006h32.698v-.015c.272.01.368.018.545.018C56.141 66 60 62.06 60 57.215v-46.19a1.016 1.016 0 0 0-.316-.738 1.044 1.044 0 0 0-.759-.286zM18.571 63.85c-3.521 0-6.391-2.974-6.391-6.634V56.06h30.654v1.155a8.896 8.896 0 0 0 3.012 6.634H18.571zm39.25-6.634c0 3.66-2.883 6.637-6.404 6.637-3.522 0-6.403-2.977-6.403-6.637v-2.253a1.008 1.008 0 0 0-.292-.745 1.034 1.034 0 0 0-.748-.305H20.99l.252-41.763H57.82v45.066z"></path>
<path d="M27.112 23h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H27.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1zM27.112 19h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H27.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1z"></path>
<path stroke="#05E2C2" stroke-width=".8" d="M48 37.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H44.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V41.79H48v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H31.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L34 33.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H46.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="76" viewBox="0 0 70 76">
<defs>
<filter id="a" width="164%" height="157.1%" x="-32%" y="-28.6%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="#05E2C2" fill-rule="nonzero" filter="url(#a)" transform="translate(10 10)">
<path d="M48.925 0H10.159a1.088 1.088 0 0 0-.767.305c-.205.198-.32.468-.323.75L8.81 43.913H1.096a1.083 1.083 0 0 0-.77.3 1.052 1.052 0 0 0-.326.75v2.253c0 4.708 3.635 8.562 8.174 8.776v.006h32.698v-.015c.272.01.368.018.545.018C46.141 56 50 52.06 50 47.215V1.025a1.016 1.016 0 0 0-.316-.738 1.044 1.044 0 0 0-.759-.286zM8.571 53.85c-3.521 0-6.391-2.974-6.391-6.634V46.06h30.654v1.155a8.896 8.896 0 0 0 3.012 6.634H8.571zm39.25-6.634c0 3.66-2.883 6.637-6.404 6.637-3.522 0-6.403-2.977-6.403-6.637v-2.253a1.008 1.008 0 0 0-.292-.745 1.034 1.034 0 0 0-.748-.305H10.99l.252-41.763H47.82v45.066z"></path>
<path d="M17.112 13h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H17.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1zM17.112 9h25.776C43.502 9 44 8.552 44 8s-.498-1-1.112-1H17.112C16.498 7 16 7.448 16 8s.498 1 1.112 1z"></path>
<path stroke="#05E2C2" stroke-width=".8" d="M38 27.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H34.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V31.79H38v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H21.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L24 23.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H36.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
</div>
Command Line Wallet
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_2" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="62" viewBox="0 0 88 62">
<g fill="none" fill-rule="evenodd">
<path stroke="#05E2C2" stroke-width="2" d="M73.393 11.048H14.25c-1.788 0-3.25 1.436-3.25 3.19v31.106c0 1.753 1.462 3.189 3.25 3.189h6.118c-.015.091-.03.184-.03.278 0 .908.756 1.65 1.68 1.65h16.624c.924 0 1.677-.742 1.677-1.65 0-.094-.01-.187-.027-.278h33.1c1.788 0 3.25-1.436 3.25-3.19V14.24c0-1.755-1.462-3.191-3.25-3.191"></path>
<g fill="#05E2C2">
<path d="M30.001 43c-.544 0-.99-.37-.99-.818V17.818c0-.45.446-.818.99-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818M33.999 43c-.542 0-.988-.37-.988-.818V17.818c0-.45.446-.818.988-.818.544 0 .99.368.99.818v24.364c0 .449-.446.818-.99.818M38 43c-.544 0-.988-.37-.988-.818V17.818c0-.45.444-.818.988-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818"></path>
</g>
<g fill="#05E2C2">
<path d="M25 19.5a2.5 2.5 0 1 1-5.001 0 2.5 2.5 0 0 1 5.001 0M25 29.5c0 1.382-1.12 2.5-2.5 2.5a2.497 2.497 0 0 1-2.5-2.5 2.499 2.499 0 1 1 5 0M20 40.5c0-1.382 1.118-2.5 2.5-2.5a2.499 2.499 0 1 1 0 5c-1.382 0-2.5-1.12-2.5-2.5"></path>
</g>
<path fill="#05E2C2" d="M16 15.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M16 45a1 1 0 1 1-2 0 1 1 0 0 1 2 0M74 15.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M74 45a1 1 0 1 1-2 0 1 1 0 0 1 2 0M61 30.001A2.998 2.998 0 0 1 58.001 33a2.999 2.999 0 1 1 0-6A3 3 0 0 1 61 30.001"></path>
<path stroke="#05E2C2" d="M72 30c0 7.731-6.269 14-14 14s-14-6.269-14-14 6.269-14 14-14 14 6.269 14 14z"></path>
<path fill="#05E2C2" d="M57.97 25.307c.952 0 1.84.246 2.594.664l.436-4.48C61 20.245 59.42 19 58.026 19h-2.741c-2.062 0-4.056 2.016-2.987 3.59L55.326 26a5.313 5.313 0 0 1 2.645-.693M58.03 34.694a5.327 5.327 0 0 1-2.594-.665L55 38.508C55 39.755 56.578 41 57.974 41h2.742c2.062 0 4.056-2.015 2.985-3.59L60.675 34a5.321 5.321 0 0 1-2.646.694M53.306 30.03c0-.954.246-1.841.665-2.596L49.492 27C48.246 27 47 28.578 47 29.973v2.744c0 2.06 2.015 4.054 3.59 2.985L54 32.674a5.31 5.31 0 0 1-.694-2.644M62.693 29.97c0 .954-.245 1.841-.664 2.594l4.479.436C67.754 33 69 31.422 69 30.026v-2.742c0-2.062-2.017-4.055-3.59-2.985L62 27.325a5.32 5.32 0 0 1 .693 2.645"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="62" viewBox="0 0 88 62">
<defs>
<filter id="a" width="151.5%" height="185%" x="-25.8%" y="-42.5%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(11 11)">
<path stroke="#05E2C2" stroke-width="2" d="M62.393.048H3.25C1.462.048 0 1.484 0 3.238v31.106c0 1.753 1.462 3.189 3.25 3.189h6.118c-.015.091-.03.184-.03.278 0 .908.756 1.65 1.68 1.65h16.624c.924 0 1.677-.742 1.677-1.65 0-.094-.01-.187-.027-.278h33.1c1.788 0 3.25-1.436 3.25-3.19V3.24c0-1.755-1.462-3.191-3.25-3.191"></path>
<g fill="#05E2C2">
<path d="M19.001 32c-.544 0-.99-.37-.99-.818V6.818c0-.45.446-.818.99-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818M22.999 32c-.542 0-.988-.37-.988-.818V6.818c0-.45.446-.818.988-.818.544 0 .99.368.99.818v24.364c0 .449-.446.818-.99.818M27 32c-.544 0-.988-.37-.988-.818V6.818c0-.45.444-.818.988-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818"></path>
</g>
<g fill="#05E2C2">
<path d="M14 8.5a2.5 2.5 0 1 1-5.001 0A2.5 2.5 0 0 1 14 8.5M14 18.5c0 1.382-1.12 2.5-2.5 2.5A2.497 2.497 0 0 1 9 18.5a2.499 2.499 0 1 1 5 0M9 29.5c0-1.382 1.118-2.5 2.5-2.5a2.499 2.499 0 1 1 0 5C10.117 32 9 30.88 9 29.5"></path>
</g>
<path fill="#05E2C2" d="M5 4.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M5 34a1 1 0 1 1-2 0 1 1 0 0 1 2 0M63 4.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M63 34a1 1 0 1 1-2 0 1 1 0 0 1 2 0M50 19.001A2.998 2.998 0 0 1 47.001 22a2.999 2.999 0 1 1 0-6A3 3 0 0 1 50 19.001"></path>
<path stroke="#05E2C2" d="M61 19c0 7.731-6.269 14-14 14s-14-6.269-14-14S39.269 5 47 5s14 6.269 14 14z"></path>
<path fill="#05E2C2" d="M46.97 14.307c.952 0 1.84.246 2.594.664l.436-4.48C50 9.245 48.42 8 47.026 8h-2.741c-2.062 0-4.056 2.016-2.987 3.59L44.326 15a5.313 5.313 0 0 1 2.645-.693M47.03 23.694a5.327 5.327 0 0 1-2.594-.665L44 27.508C44 28.755 45.578 30 46.974 30h2.742c2.062 0 4.056-2.015 2.985-3.59L49.675 23a5.321 5.321 0 0 1-2.646.694M42.306 19.03c0-.954.246-1.841.665-2.596L38.492 16C37.246 16 36 17.578 36 18.973v2.744c0 2.06 2.015 4.054 3.59 2.985L43 21.674a5.31 5.31 0 0 1-.694-2.644M51.693 18.97c0 .954-.245 1.841-.664 2.594l4.479.436C56.754 22 58 20.422 58 19.026v-2.742c0-2.062-2.017-4.055-3.59-2.985L51 16.325a5.32 5.32 0 0 1 .693 2.645"></path>
</g>
</svg>
</div>
GPU cards
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_3" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="72" viewBox="0 0 75 72">
<defs>
<filter id="a" width="164.2%" height="168%" x="-32.1%" y="-34%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.699655813 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke="#05E2C2" transform="translate(11 11)">
<circle cx="14.5" cy="7.5" r="7.5" stroke-width="2"></circle>
<circle cx="45.5" cy="25.5" r="7.5" stroke-width="2"></circle>
<circle cx="7.5" cy="35.5" r="7.5" stroke-width="2"></circle>
<circle cx="5" cy="20" r="4" stroke-width="2"></circle>
<circle cx="39" cy="11" r="4" stroke-width="2"></circle>
<circle cx="30" cy="46" r="4" stroke-width="2"></circle>
<circle cx="24" cy="25" r="5" fill="#05E2C2" stroke-width="4"></circle>
<path stroke-linecap="square" stroke-width="2" d="M18.667 14L22 20M9.208 22.213L19 25M36 14l-7 7.775M38 26.75H28M28 41.768l-3-12.652M14.318 32.286l6.47-4.048"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="72" viewBox="0 0 75 72">
<defs>
<filter id="a" width="164.2%" height="168%" x="-32.1%" y="-34%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.699655813 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke="#05E2C2" filter="url(#a)" transform="translate(11 11)">
<circle cx="14.5" cy="7.5" r="7.5" stroke-width="2"></circle>
<circle cx="45.5" cy="25.5" r="7.5" stroke-width="2"></circle>
<circle cx="7.5" cy="35.5" r="7.5" stroke-width="2"></circle>
<circle cx="5" cy="20" r="4" stroke-width="2"></circle>
<circle cx="39" cy="11" r="4" stroke-width="2"></circle>
<circle cx="30" cy="46" r="4" stroke-width="2"></circle>
<circle cx="24" cy="25" r="5" fill="#05E2C2" stroke-width="4"></circle>
<path stroke-linecap="square" stroke-width="2" d="M18.667 14L22 20M9.208 22.213L19 25M36 14l-7 7.775M38 26.75H28M28 41.768l-3-12.652M14.318 32.286l6.47-4.048"></path>
</g>
</svg>
</div>
Command Line Node
</a>
</li>
</ul>
Your filters are the problem. The filter has to be defined inside the <svg> and <defs>, but can't be named the same it seems. Renaming all the #a filters to #a, #b, #c and so on seems to work. That also explains why the first svg works, but all others not: the filter with name a is already defined, so the browser tries to fetch that and fails. See demo:
https://jsfiddle.net/wfhv2b31/ (in the demo I renamed the second and third, but not the fourth, hence why the last SVG doesn't work)
ihav done similar thing here hypergiant.com, you have to use bit of position for second svg child, hope this will solve your issue. I used opacity instead display.
*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
ul,li{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
a{text-decoration:none;color:#00D3FF;}
.downloads-documentation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:0px;margin-right:0px;}
#media only screen and (max-width: 991px){
.downloads-documentation__list{max-width:600px;margin-left:auto;margin-right:auto;}
}
.downloads-documentation__item{position:relative;width:calc(100% / 12 * 3 - 0px * 2);margin-left:0px;margin-right:0px;}
#media only screen and (max-width: 991px){
.downloads-documentation__item{width:calc(100% / 12 * 6 - 0px * 2);margin-left:0px;margin-right:0px;margin-bottom:30px;}
}
#media only screen and (max-width: 575px){
.downloads-documentation__item{width:calc(100% / 12 * 12 - 0px * 2);margin-left:0px;margin-right:0px;}
}
.downloads-documentation__item::before,.downloads-documentation__item::after{content:'';background-color:rgba(36, 171, 146, 0.3);position:absolute;width:1px;height:60px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
#media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
#media only screen and (max-width: 991px){
.downloads-documentation__item::before,.downloads-documentation__item::after{height:100px;}
}
.downloads-documentation__item::before{left:0;}
#media only screen and (max-width: 575px){
.downloads-documentation__item::before{display:none;}
}
.downloads-documentation__item::after{right:0;}
#media only screen and (max-width: 480px){
.downloads-documentation__item::after{bottom:-18px;top:auto;right:auto;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:2px;width:100%;max-width:6rem;}
}
#media only screen and (min-width: 992px){
.downloads-documentation__item:first-child:before{display:none;}
.downloads-documentation__item:last-child:after{display:none;}
}
#media (min-width: 576px) and (max-width: 991px){
.downloads-documentation__item:nth-child(2n-1):before{display:none;}
.downloads-documentation__item:nth-child(2n):after{display:none;}
}
#media only screen and (max-width: 575px){
.downloads-documentation__item:last-child:after{display:none;}
}
.downloads-documentation__reference{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
#media only screen and (max-width: 991px){
.downloads-documentation__reference{font-size:16px;}
}
.downloads-documentation__image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90px;height:80px;margin-bottom:20px;}
.downloads-documentation__image svg{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg{display:block;}
.downloads-documentation__image:hover{-webkit-transition:0.2s;transition:0.2s;}
.downloads-documentation__image svg + svg{opacity:0; position:absolute; left:0; right:0; top:-39px; bottom:0; margin:auto;}
.downloads-documentation__image:hover > svg:first-child{opacity:0;}
.downloads-documentation__image:hover svg + svg{opacity:1;}
<ul class="downloads-documentation__list">
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_4" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
<g fill="#05E2C2" fill-rule="nonzero">
<path d="M69.149 10H12.85C11.28 10 10 11.295 10 12.887v37.346c0 1.592 1.28 2.887 2.851 2.887h19.177l-1.42 5.037H26.44a.916.916 0 0 0-.91.921c0 .51.408.922.91.922H55.56c.503 0 .91-.413.91-.922a.916.916 0 0 0-.91-.921h-4.166l-1.421-5.037h19.177c1.572 0 2.851-1.295 2.851-2.887V12.887C72 11.295 70.72 10 69.149 10zM49.5 58.157h-17l1.421-5.037H48.08l1.421 5.037zm20.68-7.924c0 .576-.463 1.044-1.031 1.044H12.85a1.039 1.039 0 0 1-1.031-1.044V12.887c0-.576.463-1.044 1.031-1.044H69.15c.568 0 1.031.468 1.031 1.044v37.346z"></path>
<path d="M67.094 14H14.906a.91.91 0 0 0-.906.915v33.17a.91.91 0 0 0 .906.915h52.188c.5 0 .906-.41.906-.915v-33.17a.91.91 0 0 0-.906-.915zm-.34 1.138v3H15.246v-3h51.508zM15.246 48.004v-29h51.508v29H15.246zM17.75 17.5a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75z"></path>
<path stroke="#05E2C2" stroke-width=".6" d="M50 33.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H46.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V37.79H50v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H33.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L36 29.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H48.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="70" viewBox="0 0 82 70">
<defs>
<filter id="a" width="151.6%" height="164%" x="-25.8%" y="-32%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="#05E2C2" fill-rule="nonzero" filter="url(#a)" transform="translate(10 10)">
<path d="M59.149 0H2.85C1.28 0 0 1.295 0 2.887v37.346c0 1.592 1.28 2.887 2.851 2.887h19.177l-1.42 5.037H16.44a.916.916 0 0 0-.91.921c0 .51.408.922.91.922H45.56c.503 0 .91-.413.91-.922a.916.916 0 0 0-.91-.921h-4.166l-1.421-5.037h19.177c1.572 0 2.851-1.295 2.851-2.887V2.887C62 1.295 60.72 0 59.149 0zM39.5 48.157h-17l1.421-5.037H38.08l1.421 5.037zm20.68-7.924c0 .576-.463 1.044-1.031 1.044H2.85a1.039 1.039 0 0 1-1.031-1.044V2.887c0-.576.463-1.044 1.031-1.044H59.15c.568 0 1.031.468 1.031 1.044v37.346z"></path>
<path d="M57.094 4H4.906A.91.91 0 0 0 4 4.915v33.17a.91.91 0 0 0 .906.915h52.188c.5 0 .906-.41.906-.915V4.915A.91.91 0 0 0 57.094 4zm-.34 1.138v3H5.246v-3h51.508zM5.246 38.004v-29h51.508v29H5.246zM7.75 7.5A.753.753 0 0 1 7 6.75.753.753 0 0 1 7.75 6a.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0A.753.753 0 0 1 9 6.75.753.753 0 0 1 9.75 6a.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75zm2 0a.753.753 0 0 1-.75-.75.753.753 0 0 1 .75-.75.753.753 0 0 1 .75.75.753.753 0 0 1-.75.75z"></path>
<path stroke="#05E2C2" stroke-width=".6" d="M40 23.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H36.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V27.79H40v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H23.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L26 19.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H38.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
</div>
Desktop Wallet App
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_1" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="76" viewBox="0 0 70 76">
<g fill="#05E2C2" fill-rule="nonzero">
<path d="M58.925 10H20.159a1.088 1.088 0 0 0-.767.305c-.205.198-.32.468-.323.75l-.259 42.857h-7.714a1.083 1.083 0 0 0-.77.3 1.052 1.052 0 0 0-.326.75v2.253c0 4.708 3.635 8.562 8.174 8.776v.006h32.698v-.015c.272.01.368.018.545.018C56.141 66 60 62.06 60 57.215v-46.19a1.016 1.016 0 0 0-.316-.738 1.044 1.044 0 0 0-.759-.286zM18.571 63.85c-3.521 0-6.391-2.974-6.391-6.634V56.06h30.654v1.155a8.896 8.896 0 0 0 3.012 6.634H18.571zm39.25-6.634c0 3.66-2.883 6.637-6.404 6.637-3.522 0-6.403-2.977-6.403-6.637v-2.253a1.008 1.008 0 0 0-.292-.745 1.034 1.034 0 0 0-.748-.305H20.99l.252-41.763H57.82v45.066z"></path>
<path d="M27.112 23h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H27.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1zM27.112 19h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H27.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1z"></path>
<path stroke="#05E2C2" stroke-width=".8" d="M48 37.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H44.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V41.79H48v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H31.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L34 33.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H46.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="76" viewBox="0 0 70 76">
<defs>
<filter id="a" width="164%" height="157.1%" x="-32%" y="-28.6%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="#05E2C2" fill-rule="nonzero" filter="url(#a)" transform="translate(10 10)">
<path d="M48.925 0H10.159a1.088 1.088 0 0 0-.767.305c-.205.198-.32.468-.323.75L8.81 43.913H1.096a1.083 1.083 0 0 0-.77.3 1.052 1.052 0 0 0-.326.75v2.253c0 4.708 3.635 8.562 8.174 8.776v.006h32.698v-.015c.272.01.368.018.545.018C46.141 56 50 52.06 50 47.215V1.025a1.016 1.016 0 0 0-.316-.738 1.044 1.044 0 0 0-.759-.286zM8.571 53.85c-3.521 0-6.391-2.974-6.391-6.634V46.06h30.654v1.155a8.896 8.896 0 0 0 3.012 6.634H8.571zm39.25-6.634c0 3.66-2.883 6.637-6.404 6.637-3.522 0-6.403-2.977-6.403-6.637v-2.253a1.008 1.008 0 0 0-.292-.745 1.034 1.034 0 0 0-.748-.305H10.99l.252-41.763H47.82v45.066z"></path>
<path d="M17.112 13h25.776c.614 0 1.112-.448 1.112-1s-.498-1-1.112-1H17.112c-.614 0-1.112.448-1.112 1s.498 1 1.112 1zM17.112 9h25.776C43.502 9 44 8.552 44 8s-.498-1-1.112-1H17.112C16.498 7 16 7.448 16 8s.498 1 1.112 1z"></path>
<path stroke="#05E2C2" stroke-width=".8" d="M38 27.385h-.872v-3.973c0-.952-.783-1.727-1.745-1.727H34.2l-1.209-2.152a1.049 1.049 0 0 0-1.424-.402l-4.64 2.554h-5.183c-.962 0-1.745.775-1.745 1.727v11.86c0 .953.783 1.728 1.745 1.728h13.638c.962 0 1.745-.775 1.745-1.727V31.79H38v-4.405zm-2.617-5.009c.537 0 .976.404 1.035.921h-1.311l-.517-.92h.793zm-3.475-2.642a.357.357 0 0 1 .474.134l1.926 3.429h-8.872l6.472-3.563zm4.522 15.539c0 .571-.47 1.036-1.047 1.036H21.745a1.043 1.043 0 0 1-1.047-1.036v-11.86c0-.572.47-1.037 1.047-1.037h3.928L24 23.297h-2.037a.347.347 0 0 0-.35.346c0 .19.157.345.35.345H36.43v3.397h-2.552c-1.185 0-2.15.955-2.15 2.128v.149c0 1.173.965 2.128 2.15 2.128h2.552v3.483zm.872-4.174h-3.424c-.8 0-1.452-.645-1.452-1.437v-.149c0-.792.651-1.437 1.452-1.437h3.424v3.023z"></path>
</g>
</svg>
</div>
Command Line Wallet
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_2" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="62" viewBox="0 0 88 62">
<g fill="none" fill-rule="evenodd">
<path stroke="#05E2C2" stroke-width="2" d="M73.393 11.048H14.25c-1.788 0-3.25 1.436-3.25 3.19v31.106c0 1.753 1.462 3.189 3.25 3.189h6.118c-.015.091-.03.184-.03.278 0 .908.756 1.65 1.68 1.65h16.624c.924 0 1.677-.742 1.677-1.65 0-.094-.01-.187-.027-.278h33.1c1.788 0 3.25-1.436 3.25-3.19V14.24c0-1.755-1.462-3.191-3.25-3.191"></path>
<g fill="#05E2C2">
<path d="M30.001 43c-.544 0-.99-.37-.99-.818V17.818c0-.45.446-.818.99-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818M33.999 43c-.542 0-.988-.37-.988-.818V17.818c0-.45.446-.818.988-.818.544 0 .99.368.99.818v24.364c0 .449-.446.818-.99.818M38 43c-.544 0-.988-.37-.988-.818V17.818c0-.45.444-.818.988-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818"></path>
</g>
<g fill="#05E2C2">
<path d="M25 19.5a2.5 2.5 0 1 1-5.001 0 2.5 2.5 0 0 1 5.001 0M25 29.5c0 1.382-1.12 2.5-2.5 2.5a2.497 2.497 0 0 1-2.5-2.5 2.499 2.499 0 1 1 5 0M20 40.5c0-1.382 1.118-2.5 2.5-2.5a2.499 2.499 0 1 1 0 5c-1.382 0-2.5-1.12-2.5-2.5"></path>
</g>
<path fill="#05E2C2" d="M16 15.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M16 45a1 1 0 1 1-2 0 1 1 0 0 1 2 0M74 15.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M74 45a1 1 0 1 1-2 0 1 1 0 0 1 2 0M61 30.001A2.998 2.998 0 0 1 58.001 33a2.999 2.999 0 1 1 0-6A3 3 0 0 1 61 30.001"></path>
<path stroke="#05E2C2" d="M72 30c0 7.731-6.269 14-14 14s-14-6.269-14-14 6.269-14 14-14 14 6.269 14 14z"></path>
<path fill="#05E2C2" d="M57.97 25.307c.952 0 1.84.246 2.594.664l.436-4.48C61 20.245 59.42 19 58.026 19h-2.741c-2.062 0-4.056 2.016-2.987 3.59L55.326 26a5.313 5.313 0 0 1 2.645-.693M58.03 34.694a5.327 5.327 0 0 1-2.594-.665L55 38.508C55 39.755 56.578 41 57.974 41h2.742c2.062 0 4.056-2.015 2.985-3.59L60.675 34a5.321 5.321 0 0 1-2.646.694M53.306 30.03c0-.954.246-1.841.665-2.596L49.492 27C48.246 27 47 28.578 47 29.973v2.744c0 2.06 2.015 4.054 3.59 2.985L54 32.674a5.31 5.31 0 0 1-.694-2.644M62.693 29.97c0 .954-.245 1.841-.664 2.594l4.479.436C67.754 33 69 31.422 69 30.026v-2.742c0-2.062-2.017-4.055-3.59-2.985L62 27.325a5.32 5.32 0 0 1 .693 2.645"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="62" viewBox="0 0 88 62">
<defs>
<filter id="a" width="151.5%" height="185%" x="-25.8%" y="-42.5%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.7 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(11 11)">
<path stroke="#05E2C2" stroke-width="2" d="M62.393.048H3.25C1.462.048 0 1.484 0 3.238v31.106c0 1.753 1.462 3.189 3.25 3.189h6.118c-.015.091-.03.184-.03.278 0 .908.756 1.65 1.68 1.65h16.624c.924 0 1.677-.742 1.677-1.65 0-.094-.01-.187-.027-.278h33.1c1.788 0 3.25-1.436 3.25-3.19V3.24c0-1.755-1.462-3.191-3.25-3.191"></path>
<g fill="#05E2C2">
<path d="M19.001 32c-.544 0-.99-.37-.99-.818V6.818c0-.45.446-.818.99-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818M22.999 32c-.542 0-.988-.37-.988-.818V6.818c0-.45.446-.818.988-.818.544 0 .99.368.99.818v24.364c0 .449-.446.818-.99.818M27 32c-.544 0-.988-.37-.988-.818V6.818c0-.45.444-.818.988-.818.542 0 .988.368.988.818v24.364c0 .449-.446.818-.988.818"></path>
</g>
<g fill="#05E2C2">
<path d="M14 8.5a2.5 2.5 0 1 1-5.001 0A2.5 2.5 0 0 1 14 8.5M14 18.5c0 1.382-1.12 2.5-2.5 2.5A2.497 2.497 0 0 1 9 18.5a2.499 2.499 0 1 1 5 0M9 29.5c0-1.382 1.118-2.5 2.5-2.5a2.499 2.499 0 1 1 0 5C10.117 32 9 30.88 9 29.5"></path>
</g>
<path fill="#05E2C2" d="M5 4.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M5 34a1 1 0 1 1-2 0 1 1 0 0 1 2 0M63 4.001a1 1 0 0 1-2 0 .999.999 0 1 1 2 0M63 34a1 1 0 1 1-2 0 1 1 0 0 1 2 0M50 19.001A2.998 2.998 0 0 1 47.001 22a2.999 2.999 0 1 1 0-6A3 3 0 0 1 50 19.001"></path>
<path stroke="#05E2C2" d="M61 19c0 7.731-6.269 14-14 14s-14-6.269-14-14S39.269 5 47 5s14 6.269 14 14z"></path>
<path fill="#05E2C2" d="M46.97 14.307c.952 0 1.84.246 2.594.664l.436-4.48C50 9.245 48.42 8 47.026 8h-2.741c-2.062 0-4.056 2.016-2.987 3.59L44.326 15a5.313 5.313 0 0 1 2.645-.693M47.03 23.694a5.327 5.327 0 0 1-2.594-.665L44 27.508C44 28.755 45.578 30 46.974 30h2.742c2.062 0 4.056-2.015 2.985-3.59L49.675 23a5.321 5.321 0 0 1-2.646.694M42.306 19.03c0-.954.246-1.841.665-2.596L38.492 16C37.246 16 36 17.578 36 18.973v2.744c0 2.06 2.015 4.054 3.59 2.985L43 21.674a5.31 5.31 0 0 1-.694-2.644M51.693 18.97c0 .954-.245 1.841-.664 2.594l4.479.436C56.754 22 58 20.422 58 19.026v-2.742c0-2.062-2.017-4.055-3.59-2.985L51 16.325a5.32 5.32 0 0 1 .693 2.645"></path>
</g>
</svg>
</div>
GPU cards
</a>
</li>
<li class="downloads-documentation__item">
<a class="downloads-documentation__reference" id="item_3" href="" target="_blank">
<div class="downloads-documentation__image">
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="72" viewBox="0 0 75 72">
<defs>
<filter id="a" width="164.2%" height="168%" x="-32.1%" y="-34%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.699655813 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke="#05E2C2" transform="translate(11 11)">
<circle cx="14.5" cy="7.5" r="7.5" stroke-width="2"></circle>
<circle cx="45.5" cy="25.5" r="7.5" stroke-width="2"></circle>
<circle cx="7.5" cy="35.5" r="7.5" stroke-width="2"></circle>
<circle cx="5" cy="20" r="4" stroke-width="2"></circle>
<circle cx="39" cy="11" r="4" stroke-width="2"></circle>
<circle cx="30" cy="46" r="4" stroke-width="2"></circle>
<circle cx="24" cy="25" r="5" fill="#05E2C2" stroke-width="4"></circle>
<path stroke-linecap="square" stroke-width="2" d="M18.667 14L22 20M9.208 22.213L19 25M36 14l-7 7.775M38 26.75H28M28 41.768l-3-12.652M14.318 32.286l6.47-4.048"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="72" viewBox="0 0 75 72">
<defs>
<filter id="a" width="164.2%" height="168%" x="-32.1%" y="-34%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0196078431 0 0 0 0 0.88627451 0 0 0 0 0.760784314 0 0 0 0.699655813 0"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke="#05E2C2" filter="url(#a)" transform="translate(11 11)">
<circle cx="14.5" cy="7.5" r="7.5" stroke-width="2"></circle>
<circle cx="45.5" cy="25.5" r="7.5" stroke-width="2"></circle>
<circle cx="7.5" cy="35.5" r="7.5" stroke-width="2"></circle>
<circle cx="5" cy="20" r="4" stroke-width="2"></circle>
<circle cx="39" cy="11" r="4" stroke-width="2"></circle>
<circle cx="30" cy="46" r="4" stroke-width="2"></circle>
<circle cx="24" cy="25" r="5" fill="#05E2C2" stroke-width="4"></circle>
<path stroke-linecap="square" stroke-width="2" d="M18.667 14L22 20M9.208 22.213L19 25M36 14l-7 7.775M38 26.75H28M28 41.768l-3-12.652M14.318 32.286l6.47-4.048"></path>
</g>
</svg>
</div>
Command Line Node
</a>
</li>
</ul>
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>
In Mapbox Studio, svg images with color are imported as black and white. According to the troubleshooting website:
If you are able to add your SVG to Mapbox Studio, but appears black,
it’s likely because you are using tags to assign style
properties rather than using inline style attributes. Mapbox Studio
does not support style properties added in tags.
I am new to editing svgs - how would one assign style properties inline?
My svg code is below:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71">
<defs>
<style>
.cls-1{fill:#f15824;}
</style>
</defs>
<title>black_only_v3</title>
<g id="svg_9" data-name="svg 9">
<g id="svg_5" data-name="svg 5">
<g id="svg_6" data-name="svg 6">
<path id="svg_7" data-name="svg 7" d="M1.55,15.54C2.71,19,5.46,24,12,28.71,18.56,24,21.3,19,22.45,15.54a11.23,11.23,0,0,0,.83-4.14.59.59,0,0,0,0-.12h0a11.28,11.28,0,1,0-22.56,0s0,0,0,.12A11.19,11.19,0,0,0,1.55,15.54ZM12,2.79a8.7,8.7,0,1,1-8.7,8.7A8.69,8.69,0,0,1,12,2.79Z" transform="translate(-0.72 0)"/>
</g>
</g>
<polygon id="svg_8" data-name="svg 8" class="cls-1" points="11.31 8.14 4.42 11.58 9.59 11.58 11.31 15.03 18.19 11.58 13.03 11.58 11.31 8.14"/>
</g>
</svg>
Probably this will be OK:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71"><path d="M.83 15.54C1.99 19 4.74 24 11.28 28.71 17.84 24 20.58 19 21.73 15.54a11.23 11.23 0 0 0 .83-4.14.59.59 0 0 0 0-.12 11.28 11.28 0 1 0-22.56 0v.12a11.19 11.19 0 0 0 .83 4.14zM11.28 2.79a8.7 8.7 0 1 1-8.7 8.7 8.69 8.69 0 0 1 8.7-8.7z"/><path fill="#f15824" d="M11.31 8.14l-6.89 3.44h5.17l1.72 3.45 6.88-3.45h-5.16l-1.72-3.44z"/></svg>