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。其中可悲的是，它可能只是最后一个适用于所有浏览器的。

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动画在加载页面后运行。但是，您可以使用下一个技巧：

<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不会设置动画

3 个答案: