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:
and is this a problem with:
Finally, is there a better way to animate the 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();
});
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/