svg web 图形上的神秘间距

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

所以：

&lt;circle cx="50" cy="50" r="<b><i>48</i></b>" stroke="green" stroke-width="4" fill="yellow" /&gt;