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

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

Answer 1

根据我的实践，(?<=\(\')(.*?)(?=\'\))在加载时不起作用。也许有任何方法可以使力量发挥作用，但我对此一无所知。我分享你的方式：我使用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/

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

1 个答案: