title: SVG element not coming inside a DIV
body: <p>I am trying to display an svg line inside div. The position is given to the DIV so i am expecting the line to be placed inside div as child element but it is coming under it, as if it is outside div. Following is my code:</p>
  
  <pre><code>&lt;div style="position:absolute; top:246pt; left:6pt; width:581.976pt; height:3pt; border:1px solid blue"&gt; 
      &lt;svg xmlns="http://www.w3.org/2000/svg"  version="1.1" width="581.976pt" height="3pt" style="border:1px solid black"&gt;
          &lt;line id = "default" x1="0pt" y1="1.5pt" x2="581.976pt" y2="0pt" style="stroke:rgb(229,52,52); stroke-width:3pt;stroke-dasharray:10, 5"/&gt; 
      &lt;/svg&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qL5p74xL/" rel="nofollow">Fiddle</a></p>
  
  <p>I am trying to find the reason for a long time now but unable to understand this behavior. Any help would be appreciated. Thanks</p>