svg：激活/停用动画

Question

简短问题：有没有办法激活/停用SVG＆lt; animate＆gt;元素，以便在给定时间只有一个适用于给定的图形对象？

我在html文档中内联了一个svg文档（＆lt; svg＆gt;＆lt; / svg＆gt;）。 svg中有一个图形对象，例如一个圆圈，两个＆lt; animate＆gt;鼠标悬停在圆圈上时定义的元素。这两个动画是不相关的，它们为同一个圆圈实现不同的动画，只有一个＆lt; animate＆gt;应该在给定的时间活跃。我想在两个＆lt; animate＆gt;之间切换。元素，所以我需要停用当前活动的＆lt; animate＆gt;并激活另一个。我怎么能这样做？

Answer 1

您可以像这样构建动画：

<circle id="c1" .../>
<animate xlink:href="#c1"/>
<animate xlink:href="#c2"/>

如果您将圆圈的ID从c1更改为c2，则将应用第二个动画而不是第一个动画。