title: SVG element not visible on screen, can see element added in console
body: <p>I have the following SVG code. The SVG with id "nestedsvg" is being appended in the HTML, I can view it on the console. But it's not visible on the screen. I tried assigning it a z-index of 99 but still it's invisible. Where am I going wrong? </p>
  
  <pre><code>&lt;svg data="BusinessRoleFigure" x="144" y="95" 
  width="128" height="66" id="outer" style="position: relative;"&gt;
  
  &lt;rect x="0" y="0" width="100%" height="100%" 
  stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"
   style="position: relative;"&gt;&lt;/rect&gt;
  
  &lt;svg id="nestedsvg" x="100%" height="100" width="50"&gt;
  &lt;rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black"
   stroke-width="1" fill="black" z-index="99"&gt;&lt;/rect&gt;
   &lt;/svg&gt;
  
   &lt;circle cx="118" cy="13" r="5" fill="none" 
  stroke-linejoin="round" stroke="black" 
  z-index="1" stroke-width="1"&gt;&lt;/circle&gt;
  
   &lt;/svg&gt;
  </code></pre>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/MxHPq/145/" rel="nofollow">http://jsfiddle.net/MxHPq/145/</a></p>