如何循環SVG動畫序列？

我有animationTransform序列：如何循環SVG動畫序列？

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/> 
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

如果可以循環這個序列，而不使用腳本？

我可以設置單個動畫循環使用repeatCount="indefinite"我希望按順序循環整個序列。

來源

2010-09-02 serg

已經算出來了。解決方案爲那些有興趣誰：

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/> 
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>

來源

2010-09-02 19:05:54 serg

作品中（oold）的Firefox 10，不工作的（上最新）的Chrome 32，只是如果有人遇到同樣的問題。以及描述動畫時序的所有功能的一些有用鏈接：[W3C SVG 1.1 Spec。]（http://www.w3.org/TR/SVG/animate.html#TimingAttributes），[Developer.Mozilla.org]（https ：//developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin）。 – Jeyekomon 2014-01-20 00:06:50

可以確認這在Chrome 34中不起作用。 – hamishtaplin 2014-03-17 13:20:46

您也可以通過提供一個values屬性用分號一個animateTransform在短短環路分隔列表：

<animateTransform attributeName="transform" type="rotate" 
    values="0;30;0" begin="0s" dur="0.8s" fill="freeze" 
    repeatCount="indefinite" />

Here's an example（在Firefox 4.0檢查，鉻）。

來源

2010-12-22 11:43:46 robertc

我喜歡這個解決方案。你能否建議在哪裏找到SVG animateTransform'values'屬性的文檔？不幸的是，這是一個普通的網頁搜索常見的詞。謝謝！ – jtheletter 2014-06-19 21:44:04

@janaspage我剛剛在這裏的values屬性的文檔中遇到了問題：http://www.w3.org/TR/smil-animation/#ValuesAttribute – chrisM 2014-06-26 13:36:53

它也可以加/減（毫）秒：

begin="anim2.end-500ms"

來源

2011-11-01 10:25:20

如何循環SVG動畫序列？

回答

相關問題