哪个 SVG/SMIL DOM 元素具有“beginElement”方法

Which SVG/SMIL DOM element has the `beginElement` method?

本文关键字：beginElement 方法 元素 SVG SMIL DOM 哪个      更新时间：2023-09-26

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

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

相关文章：