title: SVG animation triggering on load rather than on DOM insertion
body: <p>The code below animates a SVG circle changing color and works as expected.</p>
  <p>If the call to <code>SVG.addAnimatedCircle(this.root)</code> is made from within the <code>callback</code> method (instead of where it is below, inside the <code>constructor</code>), the animation starts when the document is loaded — and is therefore invisible unless the window is clicked — rather than when the event is triggered.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class SVG {
  
      constructor() {
          const root = document.createElementNS(
              'http://www.w3.org/2000/svg', 'svg');
          root.setAttribute('viewBox', '-50 -50 100 100');
          this.root = root;
  
          this.callback = this.callback.bind(this);
          window.addEventListener('click', this.callback);
  
          SVG.addAnimatedCircle(this.root);
      }
  
      callback() {
          // SVG.addAnimatedCircle(this.root);
      }
  
      static addAnimatedCircle(toElement) {
          const el = document.createElementNS(
              'http://www.w3.org/2000/svg', 'circle');
          el.setAttribute('cx', '0');
          el.setAttribute('cy', '0');
          el.setAttribute('r', '10');
          el.setAttribute('fill', 'red');
  
          toElement.appendChild(el);
  
          const anim = document.createElementNS(
              'http://www.w3.org/2000/svg', 'animate');
          anim.setAttribute('attributeName', 'fill');
          anim.setAttribute('from', 'blue');
          anim.setAttribute('to', 'red');
          anim.setAttribute('dur', '3s');
  
          el.appendChild(anim);  
      }   
      
  }
  
  const svg = new SVG();
  document.body.appendChild(svg.root);</code></pre>
  </div>
  </div>
  </p>
  <p>(The above doesn't need to be inside a <code>class</code> of course, I'm simplifying a more complex class).</p>
  <p>Why is that? Isn't the animation supposed to start when the element is created and added to the DOM?</p>