javascript - 从值到值到原始值无限地动画 SVG？

Question

是否可以使用 <animate> svg 中的标签可以使 svg 图像动画的一部分从一个值到另一个值，再到另一个值。或者更好的是无限地从然后到然后返回到从然后到；还有，等等？

我想为圆的半径设置动画，但是以无限的方式。如果我不能用 <animate> 做到这一点标签，我还能怎么做？

这是到目前为止我所得到的动画运行一次的内容。

<svg>
    <circle r="100" cx="100" cy="100" fill="slategrey">
        <animate attributeName="r" from="0" to="100" dur="1.6s"/>
    </circle>
</svg>

Answer 1

不要使用 from 和 to，而是使用 values 属性使其来回循环，并且 repeatCount 属性使其永远重复。

<svg>
    <circle r="100" cx="100" cy="100" fill="slategrey">
        <animate attributeName="r" values="0;100;0" dur="1.6s" 
                 repeatCount="indefinite"/>
    </circle>
</svg>

Demo here