动画SVG在页面加载之前不会进行动画处理 [英] Animated SVGs don't animate until page is loaded

问题描述

我的网站包含很多广告，这些广告需要一段时间才能加载。完全不是问题，但是我注意到任何SVG动画都会立即绘制第一帧，但是只有在页面上所有加载完成后，动画才会出现。 SVG动画通常指示微调器/加载图标。
是否可以立即启动SVG动画？
还是将其转换为纯CSS会立即进行动画处理？

My site contains quite a lot of ads, and these take a while to load. This isn't a problem exactly, but I've noticed any SVG animations will draw the first frame instantly, but the animation comes only after all the loading has completed on the page. The SVG animations usually indicate a spinner/loading icon. Is there a method to start the SVG animation instantly? Or if I convert it to pure CSS would it animate instantly?

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

This is my svg loader code: 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>

推荐答案

抱歉，回复晚了。我最终将其翻译为LESS和LESShat，并立即加载。

Sorry for the late response. I eventually just translated it to LESS and LESShat and this loads instantly.

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

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

I can't use LESS in a jsfiddle so i had to use the output css, but the LESS/LESShat code I used was the following:

.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; }');

这篇关于动画SVG在页面加载之前不会进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！