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

Question

我的网站包含很多广告，加载这些广告需要一些时间。这完全不是问题，但我注意到任何 SVG 动画都会立即绘制第一帧，但动画只有在页面上的所有加载完成后才会出现。 SVG 动画通常表示 spinner/loading 图标。有没有一种方法可以立即启动 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 进行动画处理。遗憾的是，很可能只有最后一个可以在所有浏览器中运行。

Answer 2

抱歉回复晚了。我最终只是将它翻译成 LESS 和 LESShat，然后立即加载。

http://jsfiddle.net/z84yd0to/2/

我不能在 jsfiddle 中使用 LESS，所以我不得不使用输出 css，但我使用的 LESS/LESShat 代码如下：

.loading-icon {
    width: 20px;
    height: 20px;

    .rect {
        background-color: black;
        height: 100%;
        width: 4px;
        float:left;
        .animation(loading-rect 0.60s infinite ease-in-out);

        & ~ .rect {
            margin-left:4px;
        }
    }

    .rect1 { .animation-delay(-0.30s); }

    .rect2 { .animation-delay(-0.20s); }

    .rect3 { .animation-delay(-0.10s); }
}


.keyframes(~'loading-rect, 0%, 100% { transform: scaleY(0.2); opacity: 0.2; } 50% { transform: scaleY(1.0); opacity: 1; }');

Answer 3

SVG-animation 在加载页面后运行。但是你可以使用下一个技巧：

<iframe width="20px" height="20px" style="border:0" src="data:image/svg+xml,%3Csvg 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'%3E%3Crect x='0' y='8' width='4' height='4' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; 0.2' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='4; 20; 4' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='8; 0; 8' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='8' y='8' width='4' height='4' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; 0.2' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='4; 20; 4' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='8; 0; 8' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='16' y='8' width='4' height='4' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; 0.2' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='4; 20; 4' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='8; 0; 8' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E"></iframe>

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

Animated SVGs don't animate until page is loaded

jquery

css

animation

svg