html5 - svg如何做到一組動畫循環

問題描述

問題解答

如果只是單純的改變寬度，少年可以這樣實現

<svg> <rect x=’20’ y=’20’ width=’250’ height=’250’ fill=’blue’><animate animateType='css' attributeName='width' values='250;0;250' dur='3s' repeatCount='indefinite'/> </rect></svg>回答2：

給animate添加id后，使用begin來指定動畫開始的時間為另一個的結束。

不清楚有沒有更好的辦法。

<svg> <rect x='20' y='20' fill='blue'><animate attributeType='CSS' attributeName='width' begin='0s; second.end' from='250' to='0' dur='1s'></animate><animate attributeType='CSS' attributeName='width' begin='first.end' from='0' to='250' dur='1s'></animate> </rect></svg>