Chrome中SVG Sprite引用的动画SVG失效及IE兼容方案咨询

问题背景 #

我们将多个SVG整合为Sprite文件，通过<use href="#ic_loading_button">引用带旋转动画的加载图标，此前可正常运行，但目前出现以下问题：

• Chrome和Edge中，通过Sprite引用的SVG动画完全失效；直接嵌入SVG则动画正常
• Firefox中动画仍能正常显示
• 移除外层SVG的style="display: none"可修复Chrome的动画，但IE浏览器下所有图标会在页面顶部堆叠显示，无法兼容

当前实现代码：

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

核心原因 #

Chrome/Edge的渲染引擎会对display: none的元素进行资源优化，不加载其内部的动画内容，导致通过<use>引用时无法触发动画；而Firefox的渲染逻辑会保留隐藏元素的动画解析，因此不受影响。

兼容IE的解决方案 #

方案1：用visibility: hidden替代display: none #

保留外层SVG的宽高为0，同时设置visibility: hidden和绝对定位，既不占用页面空间，又能让Chrome解析内部动画，IE也完全支持该属性：

<svg width="0" height="0" style="visibility: hidden; position: absolute;">
    <svg viewBox="0 0 24 24" id="ic_loading_button">
        <!-- 内部路径和动画代码 -->
    </svg>
</svg>

方案2：将Sprite容器定位到视口外 #

通过绝对定位把外层SVG移到页面可视区域外，彻底隐藏的同时避免Chrome的动画禁用逻辑：

<svg width="0" height="0" style="position: absolute; left: -9999px; top: -9999px;">
    <svg viewBox="0 0 24 24" id="ic_loading_button">
        <!-- 内部路径和动画代码 -->
    </svg>
</svg>

方案3：使用CSS类控制隐藏 #

定义通用CSS类，通过overflow: hidden和绝对定位实现隐藏，同时兼容所有浏览器：

.svg-sprite-container {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

应用到外层SVG：

<svg class="svg-sprite-container">
    <svg viewBox="0 0 24 24" id="ic_loading_button">
        <!-- 内部路径和动画代码 -->
    </svg>
</svg>

以上三种方案都能在Chrome/Edge中恢复动画效果，同时兼容IE浏览器，不会出现图标堆叠的问题。

内容的提问来源于stack exchange，提问作者Sunita