Question

是否可以使用svg中的<animate>标记将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

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

1 个答案: