哪个 SVG/SMIL DOM 元素有 `beginElement` 方法？

Question

最终这是针对将在 Firefox 中运行的 Kiosk 样式应用程序（使用 jQuery 1.6.4），因此答案可以是特定于 Firefox 的。

我正在尝试制作动画 SVG，但我正在尝试通过动态插入 SMIL 来制作动画。我没有看到任何迹象表明它不能完成，http://satreth.blogspot.ch/2013_01_01_archive.html 和 http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg 似乎都表明它可以完成。

据我了解的问题是我需要调用beginElement 方法来启动动态插入的动画，但我在任何地方都看不到它。

这是一个演示问题的小提琴：http://jsfiddle.net/2pvSX/

未能回答标题中的问题：

1. 我做错了什么？
2. 是否有任何资源可用于更好地了解我想要做什么？

这是一个问题：

1. 我如何定义 SVG？
2. 我如何创建 SMIL？
3. 我如何访问 SVG？
4. 如何插入 SMIL？
5. 完全不同的东西？

最后，有没有更好的方法来为 SVG 设置动画？

Answer 1

你需要添加'http://www.w3.org/2000/svg'来创建这样的动画元素

$(document).ready(function () {
    var svg = $('svg').get(0),
    square = svg.getElementById('red'),
    animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
    animation.setAttributeNS(null, 'id', 'walker');
    animation.setAttributeNS(null, 'begin', 'indefinite');
    animation.setAttributeNS(null, 'end', 'indefinite');
    animation.setAttributeNS(null, 'dur', '10s');
    animation.setAttributeNS(null, 'repeatCount', 'indefinite');
    animation.setAttributeNS(null, 'path', 'M 0 0 H 800 Z');
    square.appendChild(animation);
    console.log(animation);
    console.log(typeof animation.beginElement); 
    animation.beginElement();    
});    

同时删除这一行animation = svg.children[1].children[0].children[1];，这样动画元素就有了beginElement函数
http://jsfiddle.net/2pvSX/1/