用 JavaScript 控制 SVG 的 SMIL答案

【问题标题】：Controlling SVG's SMIL with JavaScript用 JavaScript 控制 SVG 的 SMIL
【发布时间】：2012-05-22 14:26:53
【问题描述】：

假设我有一个昆虫的 SVG。除非这种方式不可能，否则我想将其插入为<img /> 或<object /> 标签。

现在，insect.svg 有两个动画：一个用于行走，另一个用于飞行。

我想从 HTML 的 JavaScript 单独启动/停止这些动画（或者从 HTML JavaScript 调用嵌入的 SVG JS 函数“walk”或“fly”）。

所以，最后，如果在游戏过程中我想让我的昆虫飞起来，我可以用 JS 通知它这样做，并在它不应该再飞时告诉它停止。走路也一样。

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

感谢您的宝贵时间！

【问题讨论】：

【解决方案1】：

您可以尝试使用 SMIL 动画超链接。你在 URL 上的 # 后面加上你想要开始的动画的 id。例如，请参阅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> 元素，因为它不允许编写脚本。

【讨论】：