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

Posted 2023-03-06

【中文标题】在页面加载之前，动画 SVG 不会动画

【英文标题】：Animated SVGs don't animate until page is loaded

【发布时间】：2015-03-11 17:22:21

【问题描述】：

我的网站包含相当多的广告，这些广告需要一段时间才能加载。这完全不是问题，但我注意到任何 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"   viewBox="0 0 20 20" style="enable-background:new 0 0 50 50;" xml:space="preserve">
            <rect x="0" y="8"   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"   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"   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>

【问题讨论】：

codePen 上有一个和你类似的例子……使用 AnimateTransform 加载……codepen.io/aurer/pen/jEGbA

这就是我得到加载器图标的地方。 AnimateTransform 与我使用的不同吗？它会在加载页面时立即播放动画吗？

不确定...我对您的代码没有任何问题，但由于有些人想要结束这个问题，所以不敢说。它可能在加载的时间，因为你有很多事情要做。这个 html 是从一个单独的文件中加载的，还是在它应该运行的主 HTML 文件中加载的？是否在正文部分的末尾加载了广告调用？

【参考方案1】：

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

但仍缺乏对 timelineBegin 的浏览器支持。

可能的替代方法包括使用 css 动画、网络动画（由脚本创建，see fiddle）或使用脚本为 svg 设置动画。遗憾的是，它可能只有最后一个适用于所有浏览器。

【讨论】：

我尝试了timelinebegin，但似乎并没有改善加载时间。然后我尝试了javascript，发现如果我不使用动画库，它就不是非常平台友好。然后我尝试使用一个名为 Velocity 的流行 JS 动画库对其进行动画处理，这工作正常，但仍然有一段时间在页面加载时没有出现动画。然后我决定完全放弃 SVG 并用 css 完全重写它。这是一种享受！

【参考方案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; ');

【参考方案3】：

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

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