title: dynamically created SVG element not displaying
body: <p>I'm trying to draw an SVG rectangle with pure JavaScript. It's not showing up.</p>
  
  <p>But when I run <code>document.getElementById('rect1')</code> in the the browser console, the rectangle element exists. And when I copy and paste the HTML from the console into the HTML file, the rectangle displays properly. So it seems as though the correct code is being added to the document, but the element isn't being displayed.</p>
  
  <p>HTML:    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
        &lt;svg id="test" width="500" height="500"&gt;
            &lt;!-- code copied from browser console works 
            &lt;rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1"&gt;
           &lt;/rect&gt; --&gt;
       &lt;/svg&gt;
  
        &lt;svg id="main" width="500" height="500"&gt;&lt;/svg&gt;
      &lt;/div&gt;
      &lt;script src="./src/shapes.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function addSvgElement() {
      var rect = document.createElement("rect");
      rect.setAttribute('x', 30);
      rect.setAttribute('y', 60);
      rect.setAttribute('width', 50);
      rect.setAttribute('height', 80);
      rect.setAttribute('style', "stroke:#000000; fill:none;");
      rect.id = "rect1";
      var svg = document.getElementById('main');
      svg.appendChild(rect);
  }
  
  addSvgElement(); // adds correct code, but element doesn't show up
  </code></pre>