javascript - 哪个 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 方法来启动动态插入的动画，但我没有在任何地方看到它。

这是一个演示问题的 fiddle :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/