title: SVG <animate> not working when created dynamically using <use>
body: <p>While I have found variations of this question I have not found a solution for my problem. 
  For the sake of brevity I have the following structure...</p>
  
  <pre><code>&lt;svg&gt;
     &lt;g&gt;
       &lt;rect&gt;&lt;/rect&gt;
       &lt;rect&gt;&lt;/rect&gt;
       &lt;rect&gt;&lt;/rect&gt;
     &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I can animate these rect elements by adding a use element beneath the rect elements within the group.
  However, if I try to dynamically create a use element with animation rules to insert after the rect elements and inside the group, the animation does not take place. </p>
  
  <p>When reviewing in Chrome Dev Tools, I can see that the dynamically created elements are there, but the animation is not taking place.</p>
  
  <p>I have tested in FF and Chrome, and neither work.</p>
  
  <p>I have read that this may be a Chrome bug, but most of the threads that I read were older, and am not sure if a solution has been found yet. </p>
  
  <p>When I am creating my elements I am using createElementNS.
  I have tried adding the FakeSmile library even though this seems to be IE specific.</p>
  
  <p>I am only using JavaScript, no jQuery.</p>
  
  <p>If I am not making myself clear, here is the desired result: <a href="http://codepen.io/JoeyCinAZ/pen/Hstkr" rel="nofollow">http://codepen.io/JoeyCinAZ/pen/Hstkr</a>
  and here is the non-functioning example: <a href="http://codepen.io/JoeyCinAZ/pen/GHhbw" rel="nofollow">http://codepen.io/JoeyCinAZ/pen/GHhbw</a></p>