Recently I noticed that some animated SVGs that we use, lost their animation when used from inside an SVG Sprite.
We have a file with a couple SVGs that we use in our page, and we usually use them like the following:
<svg width="0" height="0" style="display: none">
<svg viewBox="0 0 24 24" id="ic_loading_button">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
<animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</svg>
<div style="display:flex">
<svg style="width: 8rem;">
<use href="#ic_loading_button"></use>
</svg>
<svg style="width: 8rem;" viewBox="0 0 24 24" id="ic_loading_button">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
<animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>This worked until a couple weeks ago and we got a spinning SVG for a loading overlay. It still works in Firefox and other browsers, but not in Chrome or Edge.
If we use the SVG directly without loading it from the xlink:href, it works correctly.
Anyone knows why this happened in Chrome recently or how it can be solved?
Thank you in advance.
As mentioned by @enxaneta, removing the style="display: none" makes the SVG animate in Chrome. However, we will need to support Internet Explorer and if I remove the display: none, all the icons show on top of each other on the beginning of the page.
Any sugestion?
display="none" is best avoided as much as possible with SVG if you actually intend to display that content for something e.g. via a <use> element, as the contents of a filter or pattern etc. The SVG specification would suggest that this ought to work but in reality it does rather conflict with how browsers actually (have to) implement display="none"
You should be able to use visibility="hidden" instead in most cases.