title: SVG animate with dynamically added elements
body: <p>Based on <a href="https://stackoverflow.com/questions/2125646/adding-svg-element-to-an-html-file">this</a> code, I'm trying to animate a dynamically-generated SVG element:</p>
  
  <pre><code>var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
  var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
  circle.setAttribute("cx", "10");
  circle.setAttribute("cy", "10");
  circle.setAttribute("r", "10");
  circle.setAttribute("fill", "blue");
  var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
  ani.setAttribute("attributeName", "transform");
  ani.setAttribute("attributeType", "xml");
  ani.setAttribute("type", "translate" );
  ani.setAttribute("from", "10");
  ani.setAttribute("to", "100");
  ani.setAttribute("begin", "0s");
  ani.setAttribute("dur", "2s");
  ani.setAttribute("fill", "freeze");
  circle.appendChild(ani);
  svgnode.appendChild(circle);
  document.getElementById('mydiv').appendChild(svgnode);
  </code></pre>
  
  <p>the SVG shows up fine, but the animation doesn't work. If I write the equivalent code in plain HTML/SVG it works. I'm using Chrome.</p>