title: How to fix SVG top and left stroke truncation?
body: <p>I have created an ellipse in SVG with a <code>stroke-width</code> and <code>stroke</code> but the top and left sides of the stroke are truncated. They appear to be overflowing outside of the containing <code>svg</code> tag. I tried using <code>overflow:visible;</code> property on the SVG but it still doesn't work.</p>
  
  <p>Following is my HTML:</p>
  
  <pre><code>&lt;div id="div1"&gt;
      &lt;svg id="svg1"&gt;
          &lt;ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"&gt;&lt;/ellipse&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is its CSS:</p>
  
  <pre><code>#div1 {
      padding:10px;
      margin:10px;
  }
  #svg1 {
      overflow:visible;
      margin-left:86.4305555339479;
      margin-top:-4.409722221119791;
  }
  
  #oval1 {
      fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%);
      stroke-width:5.291666665343749;
      stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%);
  }
  </code></pre>
  
  <p>You can see the <a href="http://jsfiddle.net/sunnysinghthakran/qfCtz/" rel="nofollow">running code here</a> as well.</p>
  
  <p>I have had a similar problem with rectangles in the past and they got fixed after using <code>overflow:visible;</code> for the containing svg. But it doesn't seems to be working for ellipses now.</p>
  
  <p>Can anyone help me fix the issue?</p>
  
  <p>Thnx in advance!</p>