html - SVG 动画仅在页面完全加载后开始。是真的吗？

Question

我刚开始玩 SVG 动画。我希望动画尽快开始，但似乎动画只在页面完全加载后开始，包括图像。真的吗？有人可以证实吗？不管怎么样？

我创建了一个 fiddle ，其中包含一个大图像 (1.7MB) 作为示例。请检查一下: https://jsfiddle.net/8mu69Lm5/2/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100">      
  <rect x="150" y="20" width="60" height="60" fill="blue" transform="rotate(91.0292 180 50)">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 180 50" to="360 180 50" dur="4s" repeatCount="indefinite"/>
  </rect>  
</svg>
<img src="http://images6.alphacoders.com/370/370399.jpg">

更新:清除缓存然后点击运行，因为 jsfiddle 将预加载图像

Answer 1

作为我的实践，<animateTransform>在加载时不起作用。也许有任何方法可以使力起作用，但我不知道。我分享给你我的方法:我为此使用了 css 动画:我添加 rotate动画:

@keyframes rotate {
   100% {
        transform: rotate(360deg);
    }
}

并添加mysvg id 到 svg block 并删除 animateTransform ，由于 (widthsvg-widthrect)/2 = (300-60)/2 = 120，将 x 从 150 更改为 120。

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100">      
    <rect x="120" y="20" width="60" height="60" fill="blue"></rect>
</svg>
<img src="http://images6.alphacoders.com/370/370399.jpg">

合并 rotate动画 mysvg编号

#mysvg {animation: rotate 4s linear infinite;}

所以总结https://jsfiddle.net/tv01kbwm/