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

Question

我刚开始玩 SVG 动画。我希望动画尽快开始，但似乎动画仅在页面完全加载后才开始，包括图像。真的吗？有人可以证实吗？反正就在附近？

我创建了一个包含大图像 (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 块并删除 animateTransform，将 x 从 150 更改为 120，因为 (widthsvg-widthrect)/2 = (300-60)/2 = 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 id

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

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