svg：激活/停用动画答案

【问题标题】：svg: activate/deactivate animationssvg：激活/停用动画
【发布时间】：2014-09-03 22:00:40
【问题描述】：

小问题：有没有办法激活/停用 SVG 元素，以便在给定时间只有一个应用于给定图形对象？

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

【问题讨论】：

设置/清除开始属性，以便动画开始/不开始。
谢谢。问题是在重新激活时，我需要 begin 属性的内容。所以在清除它之前，我需要将它存储在一个很痛苦的变量中。那是因为上面的问题只是手头问题的简化版本，我实际上有大约 50 个动画对象，每个对象有 4-8 个动画元素（这是一张带有动画的各个街区的地图）。我将动画元素收集到一个组或另一个单独的 svg 并一次激活/停用整个组或 svg 会很好。

【解决方案1】：

你可以像这样构建你的动画：

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

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

【讨论】：