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>