在加载页面之前，动画SVGs是不会动的。

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

抱歉反应太晚了。我最终只是把它翻译成LESS和LESShat，然后立即加载。

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

我不能在jsfiddle中使用更少的代码，所以我不得不使用输出css，但是我使用的更少/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 2

为了尽早启动动画(在启动加载之前)，SVG2规范添加了timelineBegin属性。这也是SVGMicro1.2的一部分。

不过，浏览器仍然缺乏对timelineBegin的支持。

可能的选择包括使用css动画、web动画(由脚本创建、见小提琴创建)或用脚本动画svg。遗憾的是，在所有浏览器中，这可能只是最后一个。

Answer 3

SVG-动画在加载页面后运行。但是，您可以使用下一个技巧：

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