javascript - 用 JavaScript 控制 SVG 的 SMIL

Question

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

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

我想单独地从 HTML 的 JavaScript 开始/停止这些动画(或者从 HTML JavaScript 调用嵌入的 SVG JS 函数“走”或“飞”)。

所以，最后，如果在游戏过程中我想让我的昆虫飞起来，我可以用 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>元素，因为它不允许编写脚本。