title: Dynamically adding elements to loaded svg file
body: <p>After loading an svg file from InkScape I want to add new elements to the drawing, created under program control. This seems to work fine if we just change the attributes of already present elements, but new created ones, even if they appear when inspecting the DOM, do not show!</p>
  
  <p>A hand-simplified SVG test file:</p>
  
  <pre><code>&lt;svg id="svg8" width="1e3" height="750" version="1.1" 
   viewBox="0 0 264.58333 198.43751" xmlns="http://www.w3.org/2000/svg"&gt;
  
      &lt;g id="layer"&gt;&lt;circle id="cc0" cx="20" cy="20" r="10"/&gt;&lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>The javascript/html file:</p>
  
  <pre><code>&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"/&gt;
  
  &lt;script&gt;
      function addCircle() {
          var svgDoc = document.getElementById("test");
          var svg = svgDoc.contentDocument;
          var svgns = svgDoc.namespaceURI;
  
          // Ok, this changes the circle to red
          var c0 = svg.getElementById("cc0");
          c0.setAttribute("fill", "#ff0000");
  
          var layer = svg.getElementById("layer");
  
          // Create a circle inside layer "g"
          var cc = document.createElementNS(svgns, "circle");
          cc.setAttribute("cx", "50");
          cc.setAttribute("cy", "50");
          cc.setAttribute("r", "20");
  
          layer.appendChild(cc);
          // However it's not updating the screen
          // even if DOM shows the circle is there, inside the "g"
      }
  &lt;/script&gt;&lt;/head&gt;
  
  &lt;body&gt;
  &lt;object id="test" data="test.svg" type="image/svg+xml"&gt;&lt;/object&gt;
  &lt;script&gt;    
      document.onreadystatechange = function(){
         if(document.readyState === 'complete') addCircle(); }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong? Or what am I missing? Thank you!</p>