title: SVG element nested in another SVG element has 0px*0px size
body: <p>I'm building a web-based SVG editing program by javascript.
  During this, I faced very strange issue.
  I made SVG element and appended it inside another SVG element.
  But nested SVG element always has 0px*0px size.
  I confirmed that it has right values for width and height attributes on Inspector, but it's displayed as zero size.</p>
  
  <p>Here is my whole code.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;SVG Test&lt;/title&gt;
     &lt;meta charset="utf-8"/&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
     &lt;meta name="apple-mobile-web-app-capable" content="yes"/&gt;
  
     &lt;link rel="stylesheet" href="svgtest.css" type="text/css"/&gt;
     &lt;script src="svgtest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="overflow: hidden"&gt;
     &lt;div id="workarea"&gt;
        &lt;div id="svgcanvas" style="position: relative"&gt;
        &lt;/div&gt;&lt;!-- &lt;div id="svgcanvas"&gt; --&gt;
     &lt;/div&gt;&lt;!-- &lt;div id="workarea"&gt; --&gt;
  
     &lt;script&gt;
        window.onload = function() {
           initSVGPanel(document.getElementById('svgcanvas'));
        }
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>svgtest.css</p>
  
  <pre><code>body {
      background: #2c473a;
  }
  
  html, body, div {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
  }
  
  #workarea * {
      transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
  }
  
  #workarea {
      display: inline-table-cell;
      position:absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 50px;
      background-color: #A0A0A0;
      border: 1px solid #808080;
      overflow: scroll;
      cursor: auto;
  }
  
  #svgroot {
      -moz-user-select: none;
      -webkit-user-select: none;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  #svgcanvas {
      line-height: normal;
      display: inline-block;
      background-color: #A0A0A0;
      text-align: center;
      vertical-align: middle;
      width: 640px;
      height: 480px;
      -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
      position: relative;
      /*background: -moz-radial-gradient(45deg,#bbb,#222);
      background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));*/
  }
  </code></pre>
  
  <p>svgtest.js</p>
  
  <pre><code>var initSVGPanel = function(container)
  {
      var svgns = 'http://www.w3.org/2000/svg',
          xlinkns = 'http://www.w3.org/1999/xlink';
  
      var svgdoc = container.ownerDocument;
  
      var svgroot = svgdoc.createElementNS(svgns, 'svg');
      svgroot.setAttribute('id', 'svgroot');
      svgroot.setAttribute('xmlns', svgns);
      svgroot.setAttribute('xlinkns', xlinkns);
      svgroot.setAttribute('width', 640);
      svgroot.setAttribute('height', 480);
      svgroot.setAttribute('x', 0);
      svgroot.setAttribute('y', 0);
      svgroot.setAttribute('overflow', 'visible');
      container.appendChild(svgroot);
  
      var canvasbg = svgdoc.createElementNS(svgns, 'svg');
      canvasbg.setAttribute('id', 'canvasBackground');
      canvasbg.setAttribute('overflow', 'none');
      canvasbg.setAttribute('width', 640);
      canvasbg.setAttribute('height', 480);
      canvasbg.setAttribute('x', 640);
      canvasbg.setAttribute('y', 480);
      svgroot.appendChild(canvasbg);
  
      var canvasbgrect = svgdoc.createElement('rect');
      canvasbgrect.setAttribute('width', '100%');
      canvasbgrect.setAttribute('height', '100%');
      canvasbgrect.setAttribute('x', 0);
      canvasbgrect.setAttribute('y', 0);
      canvasbgrect.setAttribute('stroke', '#000');
      canvasbgrect.setAttribute('fill', '#FFF');
      canvasbg.appendChild(canvasbgrect);
  
      var svgcontent = svgdoc.createElementNS(svgns, "svg");
      svgcontent.setAttribute('id', 'svgcontent');
      svgcontent.setAttribute('width', 640);
      svgcontent.setAttribute('height', 480);
      svgcontent.setAttribute('x', 640);
      svgcontent.setAttribute('y', 480);
      svgcontent.setAttribute('overflow', 'visible');
      svgroot.appendChild(svgcontent);
  
      var testCircle = svgdoc.createElement('circle');
      testCircle.setAttribute('cx', 320);
      testCircle.setAttribute('cy', 240);
      testCircle.setAttribute('r', 100);
      testCircle.setAttribute('stroke', '#00F');
      testCircle.setAttribute('fill', '#0F0');
      svgcontent.appendChild(testCircle);
  
      container.style.width = 640*3;
      container.style.height = 480*3;
  
      svgroot.setAttribute('width', 640*3);
      svgroot.setAttribute('height', 480*3);
  }
  </code></pre>
  
  <p>PS: </p>
  
  <p>I tested this code on all modern browsers like Google Chrome, Mozilla Firefox, Safari, Internet Explorer(all the latest versions). </p>
  
  <p>Also, I found that if I select <code>Edit as HTML</code> on Inspector, and change something, it appears with specified width and height.</p>