Question

所以我想无限期地循环我的svg动画序列。继承我的代码：

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>

快速谷歌之后我发现了我认为我在寻找SO answer的内容，唉它很接近但却没有完全达到我所需要的水平。

查看与问题的区别，并且我有特定的时间我希望动画生效（4750ms，8000ms，9750ms和13000ms），而在答案中，只有一段时间。

另一个谷歌把我带到了这个answer，但似乎OP并没有对时间感到困惑。

Answer 1

听起来你想要这些值的某些值和关键时间。 E.g。

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>

Answer 2

这个怎么样？ How to make SVG Loop Animation?

示例代码：

<?php
$word = "1";
$tag = "www.yahoo.com/" . $word;

echo '<script text="text/javascript">window.onload =     function(){window.open("'.$tag.'");} </script>';

?>

如何循环一个特定的定时SVG动画序列？

2 个答案: