神秘间距

Question

这是我的代码：http://jsfiddle.net/C8d34/17/

这是我对SVG代码：

<svg viewBox="0 0 100 100"> /* this here */ 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

我已经尝试了一些不同的东西，但它似乎是，虽然在理论上圆圈应该撞到蓝色盒子的顶部和底部，而是留下空间。我试过这个：

* { 
    padding:0px; 
    margin:0px; 
} 

所有无济于事。任何人都可以告诉我为什么这个圆圈不会完全填满这个区域。

Answer 1

基本几何。

你的号码必须是这样的：(r * 2) + strokeWidth = height

在这种情况下，如果你想保持stroke-width="4"，那么你要
r = (height - strokeWidth)/2 = 96/2 = 48

所以：

<circle cx="50" cy="50" r="48" stroke="green" stroke-width="4" fill="yellow" />