jquery - 动画 SVG 在页面加载之前不会动画

Question

我的网站包含大量广告，加载这些广告需要一些时间。这完全不是问题，但我注意到任何 SVG 动画都会立即绘制第一帧，但动画只有在页面上的所有加载完成后才会出现。 SVG 动画通常表示微调器/加载图标。 有没有一种方法可以立即启动 SVG 动画？ 或者，如果我将它转换为纯 CSS，它会立即生成动画吗？

这是我的 svg 加载程序代码: http://jsfiddle.net/5zq5j4d9/

<div class="loading-icon-outer">
    <div class="loading-icon">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" style="enable-background:new 0 0 50 50;" xml:space="preserve">
            <rect x="0" y="8" width="4" height="4" fill="#333" opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="8" y="8" width="4" height="4" fill="#333"  opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="16" y="8" width="4" height="4" fill="#333"  opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            </rect>
        </svg>
    </div>
</div>

Answer 1

为了尽早开始动画(在触发加载之前)，SVG2 规范添加了 timelineBegin属性。这也是 SVG Tiny 1.2 的一部分。

浏览器对 timelineBegin 的支持仍然不足。

可能的替代方案包括使用 css 动画、网络动画(由脚本创建，see fiddle)或使用脚本对 svg 进行动画处理。遗憾的是，这可能只是最后一个适用于所有浏览器的。