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

所以：

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