svg：激活/关闭动画

简短的问题：有没有一种方法来激活/停用SVG <动画>元素，以便在给定时间只有一个适用于给定的图形对象？svg：激活/关闭动画

我有一个内嵌在一个html文档中的svg文档（<svg> </svg >）。在svg中有一个图形对象，例如一个圆和两个<动画效果>当鼠标悬停在圆上时定义的元素。这两个动画是无关的，他们为同一个圆圈实现不同的动画，在给定时间只有一个<动画>应该是活动的。我想切换两个<动画>元素，所以我需要停用当前活动的<动画>并激活其他。我怎样才能做到这一点？

来源

2014-09-03 torel

设置/清除begin属性，以便动画不会启动。 – 2014-09-04 06:13:16

Thx。问题在于，当重新激活时，我需要begin属性的内容。因此，在清除它之前，我需要将它存储在变量中，这将是一个痛苦。那是因为上面的问题只是手头问题的一个简化版本，实际上我有大约50个带有4-8个动画元素的动画对象（这是带有各种动画的社区的地图）。某些我将动画元素收集到一个组或另一个单独的svg中，并且一次激活/停用整个组或svg会很好。 – torel 2014-09-04 07:20:50

你可以组织你的动画是这样的：

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

如果从C1更改圆的ID C2那么第二个动画将适用，而不是第一个。

来源

2014-09-04 09:21:41

是的，似乎是一个可行的解决方法...希望它不会是一个问题，指向不存在的东西！谢谢！ – torel 2014-09-04 10:00:29

我点击它，这是你的意思？ – torel 2014-09-04 11:56:31

就是这样。谢谢。 – 2014-09-04 12:55:12

svg：激活/关闭动画

回答

相关问题