title: SVG stroke drawn clipped
body: <p>I have <code>&lt;svg&gt;</code> inside of a <code>&lt;div&gt;</code>, but the stroke is giving me issues, it's being clipped by the <code>div</code>'s bounding box I think, not sure.</p>
  
  <p>On Chrome and FireFox, the stroke is being clipped.</p>
  
  <p>Surprisingly, on IE11 it's not clipped, but that's still not correct, it should instead be drawn inside the <code>svg</code>. Because if I put two <code>div</code> elements near each other, I don't want to see stroke of one of the <code>svg</code> being drawn on the other. BUT, if there's no other way, this would still be an acceptable solution to me.</p>
  
  <p>Ideally what I need is for the <code>svg</code> to draw its stroke inside. But even how IE 11 is doing would be an acceptable solution for me for now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container
  {
    width: 300px;
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;svg version="1.1" 
         baseProfile="full"
         xmlns="http://www.w3.org/2000/svg"
         width="100%" 
         height="100%"
         fill="yellow"
         stroke-width="10"
         stroke="green"&gt;
      &lt;circle cx="50%" cy="50%" r="50%" /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need a solution which works for any svg, the <code>circle</code> is just an example</p>