viewBox误解 - 为什么矩形出现在中间

Question

看到这个简单的代码：

<svg width="400" height="400" viewBox="0 0 50 200">
  <rect width="50" height="200" style="fill:blue"/>
</svg>

预期结果：

viewBox 设置将完美裁剪矩形，然后将其拉伸到400x400 svg viewPort 。 产生400x400蓝色方块。

实际结果

蓝色矩形，位于svg 视口的中间，两侧有白色marigins。

我错过了什么？