Can't change SVG fill color

Can't change SVG fill color - css

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;
}

Related

Tailwind CSS - Wrapping DIV to content and centering

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:

Multiple svg on a page with not unique id for filters

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>

SVG CSS Transform Scale Animation Not Working on Safari or Firefox

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>

understanding svg css style

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>

How To Reliably Fill SVGs Using <pattern> in Chrome & Safari

Safari 7.0 & 8.0 & Chrome 40.X, Will Not Display SVGs With Fills Using , When A Negative Scale Is Set.
Research suggests that this maybe due to a recent Chrome Issue:
https://code.google.com/p/chromium/issues/detail?id=447707
After a couple hours of research I am not able to find any known issues for Safari 8.0 or 7.0. Please note this issue is fixed in Safari 8.1.2.
Does anyone know how to make the image properly display in the background of this SVG for Chrome 40.X & Safari 7.0 & 8.0? I have confirmed that removing the negative scale does fix this issue, but I'd greatly prefer to not have to remove the scale. Any other ideas?
Here is the code for the SVG:
<svg style="stroke-width: 20px; stroke-dasharray: 50, 50; stroke-opacity: 1; stroke: rgb(172, 245, 82); transition: stroke 500ms ease 500ms; stroke-linecap: round; stroke-linejoin: round;" fill="url(#a_fabricPattern)" class="svg-container svgStroke" version="1.1" id="a_svgContainer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1000 1020" xml:space="preserve">
<defs>
<pattern patternUnits="userSpaceOnUse" id="a_fabricPattern" width="5730" height="4650" x="0" y="0">
<image x="0" y="0" id="fabricBgID" width="5730" height="4650" xlink:href="http://blob.apliiq.com/sitestorage/cropped-fabrics/805_573_465.jpg"></image>
</pattern>
</defs>
<g id="svgGtag">
<g transform="translate(0,1020) scale(0.130000,-0.130000)">
<path d="M1222 6277 l-262 -262 0 -2240 0 -2240 218 -218 217 -217 1171 0
1171 0 246 254 247 254 0 2210 0 2210 -257 256 -258 256 -1115 0 -1115 0 -263
-263z m1948 -2477 l0 -1760 -575 0 -575 0 0 1760 0 1760 575 0 575 0 0 -1760z"></path>
<path d="M5104 6407 c-77 -73 -205 -193 -285 -267 -79 -74 -197 -184 -262
-246 l-117 -111 2 -334 3 -334 188 -5 187 -5 3 -1522 c2 -1261 0 -1524 -11
-1528 -8 -3 -102 -5 -209 -5 l-195 0 6 -31 c3 -17 6 -231 6 -475 l0 -444 945
0 945 0 0 475 0 475 -197 2 -198 3 -3 2243 -2 2242 -333 0 -332 -1 -141 -132z"></path>
</g>
</g>
</svg>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Can't change SVG fill color - css

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; }

Related

Tailwind CSS - Wrapping DIV to content and centering

Multiple svg on a page with not unique id for filters

SVG CSS Transform Scale Animation Not Working on Safari or Firefox

understanding svg css style

How To Reliably Fill SVGs Using <pattern> in Chrome & Safari

Categories

Resources

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Can't change SVG fill color - css

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; }​

Related

Tailwind CSS - Wrapping DIV to content and centering

Multiple svg on a page with not unique id for filters

SVG CSS Transform Scale Animation Not Working on Safari or Firefox

understanding svg css style

How To Reliably Fill SVGs Using <pattern> in Chrome & Safari

Categories

Resources

I think you need to match the svg element, eg: path:hover { fill: blue; }