神祕間距

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" />