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

问题

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

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.

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.

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

Failing an answer to the question in the title:

1. What am I doing wrong?
2. Are there any resources available to better understand what I'm trying to do?

and is this a problem with:

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?

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

回答1:

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();    
});    

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/

来源：https://stackoverflow.com/questions/19163671/which-svg-smil-dom-element-has-the-beginelement-method