2

最终，这是针对将在 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 设置动画？

4

1 回答 1

4

您需要添加'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/

于 2013-10-03T17:03:51.117 回答