使用JavaScript控制SVG的SMIL

Question

假设我有一只昆虫的SVG.除非是另有不可能这样,我想将它插入<img />或<object />标签.

现在,insect.svg有两个动画:一个用于行走,另一个用于飞行.

我想单独启动/停止这些动画,并从HTML的JavaScript(或以其他方式调用嵌入式SVG JS函数"walk"或"fly",来自HTML JavaScript)开始/停止这些动画.

所以,最后,如果在游戏过程中我希望我的昆虫飞行,我可以告诉它用JS这样做,并告诉它停止它不应该再飞.跟走路一样.

有没有办法做到这一点？过去一小时我一直在谷歌搜索,并没有真正的发现.如果这是一个问题,我不关心IE支持.

感谢您的时间!

Answer 1

您可以尝试使用 SMIL 动画超链接。您可以将要启动的动画的 ID 放在 URL 上的 # 后面。例如，请参阅http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html - 单击鼠标并启动动画时 URL 会发生变化。

否则，如果你想用 javascript 启动动画，它会像这样......

var svgDocument = document.getElementById("objectId>").getSVGDocument();
svgDocument.getElementById('<animationElementId>').beginElement();

但这不适用于<img>元素，因为它不允许编写脚本。