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

时间:2015-03-13 18:36:00

标签: html animation svg

我刚开始玩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">

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

1 个答案:

答案 0 :(得分:0)

根据我的实践,(?<=\(\')(.*?)(?=\'\))在加载时不起作用。也许有任何方法可以使力量发挥作用,但我对此一无所知。 我分享你的方式: 我使用css动画: 我添加了<animateTransform>动画:

rotate

然后将@keyframes rotate { 100% { transform: rotate(360deg); } } id添加到svg块并删除mysvg,由于(widthsvg-widthrect)/ 2 =(300-60)/ 2 = 120,将x从150更改为120。

animateTransform

<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 id组合

mysvg

所以摘要https://jsfiddle.net/tv01kbwm/