UPDATE: Looks like there are active bug for this behaviour in at least Chrome (https://code.google.com/p/chromium/issues/detail?id=231577) and has been for Firefox as well (https://bugzilla.mozilla.org/show_bug.cgi?id=378923). So depending on version you might be out of luck. As of writing this is not fixed in Chrome (32.0.1700.6 beta) and there is a fiddle you can use to test with here: http://jsfiddle.net/HRsvX/36/ all three triangles should be fully visible if the browser implements the current SVG 1.1 spec. Fiddle reproduced below.
The circle inner area is bordering the SVG element. Before HTML5t the SVG element itself is like an image or flash movie, it can't overflow into the html document, it has it's own canvas so to speak. When you add stroke (that by default is outside the area you defined) the stroke will end up outside the SVG canvas. You'll have to account for that in the centering of the circle:
The center has to be the radius+stroke width so your center x for example would have to be 164.041666625656 + 5.291666665343749 minimum to fully fit inside the SVG.
If you specify the HTML5 doctype and use an inline SVG as in your example it should show the overflowing content since the default value for overflow is visible and HTML5 allows for overflow on inline SVG elements.
So either check your doctype or reposition the center to account for the stroke width.
More on the overflow of SVG elements can be found in Mozilla developer documents and a nice piece on this MSDN blog that explains the default overflow.
HTML
<div><svg height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
CSS
div {
height:100px; width:100px;
margin:1em auto;
border: solid 1px black;
}
svg { overflow:visible }
#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope
#clip2 {clip: auto} //nope