哪个SVG / SMIL DOM元素有`beginElement`方法？ [英] Which SVG/SMIL DOM element has the `beginElement` method?

问题描述

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

Ultimately this is for a Kiosk-style app (using jQuery 1.6.4) that will run in Firefox, so answers can be Firefox-specific.

我'我试图制作一个动画SVG，但我试图通过动态插入SMIL来动画它。我没有看到任何暗示无法完成的事情，并且都 http://satreth.blogspot.ch/2013_01_01_archive .html 和 http://srufaculty.sru.edu/david。 dailey / svg / SMILorJavaScript.svg 似乎表明它可以完成。

I'm trying to make a animated SVG, but I'm trying to animate it by dynamically inserting SMIL. I've seen nothing that suggests it cannot be done, and both http://satreth.blogspot.ch/2013_01_01_archive.html and http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg seem to indicate that it can be done.

我理解的问题是我需要调用 beginElement 启动动态插入动画的方法，但我没有在任何地方看到它。

The problem as I understand it is that I need to call the beginElement method to start the dynamically inserted animation, but I don't see it anywhere.

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

Here's a fiddle demonstrating the problem: http://jsfiddle.net/2pvSX/

对标题中的问题没有回答：

Failing an answer to the question in the title:

1. 我做错了什么？


2. 是否有任何资源可以更好地了解我正在尝试做什么？

这是一个问题：

1. 我如何定义SVG？


2. 我是如何创建SMIL的？


3. 我是如何访问SVG的？


4. 我是如何插入SMIL的？


5. 还有其他东西吗？

1. How I'm defining the SVG?
2. How I'm creating the SMIL?
3. How I'm accessing the SVG?
4. How I'm inserting the SMIL?
5. Something else entirely?

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

Finally, is there a better way to animate the SVG?

推荐答案

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

you need to add 'http://www.w3.org/2000/svg' to create the animation element like this

$(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/

also remove this line animation = svg.children[1].children[0].children[1]; so the animation element have the beginElement function
http://jsfiddle.net/2pvSX/1/

这篇关于哪个SVG / SMIL DOM元素有`beginElement`方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！