2

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?

pete
  • 24,141
  • 4
  • 37
  • 51

1 Answers1

4

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/

Abraham Uribe
  • 3,118
  • 7
  • 26
  • 34
  • Just to be clear on why this works, I need to make sure that the `animateMotion` element shares the same namespace as the SVG, or it won't work? Or is there a different reason? – pete Oct 03 '13 at 17:09
  • yes it need to be created with the same namespace or else it will be the same as creating the element with createElement – Abraham Uribe Oct 03 '13 at 17:15