SVG stroke drawn clipped [duplicate]

Question

I have <svg> inside of a <div>, but the stroke is giving me issues, it's being clipped by the div's bounding box I think, not sure.

On Chrome and FireFox, the stroke is being clipped.

Surprisingly, on IE11 it's not clipped, but that's still not correct, it should instead be drawn inside the svg. Because if I put two div elements near each other, I don't want to see stroke of one of the svg being drawn on the other. BUT, if there's no other way, this would still be an acceptable solution to me.

Ideally what I need is for the svg to draw its stroke inside. But even how IE 11 is doing would be an acceptable solution for me for now.

.container
{
  width: 300px;
  height: 300px;
}

<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="50%" />
  </svg>
</div>

I need a solution which works for any svg, the circle is just an example

Answer 1

The stroke doesn't count with the total radius. Reduce the radius:

.container
{
  width: 300px;
  height: 300px;
}

<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="45%" />
  </svg>
</div>