html5 – SVG标签占用了额外的空间

所以我在 HTML5中使用SVG元素遇到了一个奇怪的大小问题.这比我怀疑的空间要大得多.图像中的每个小矩形都是一个矩形元素,宽度和高度为“20”.

SVG元素的高度和宽度应为20 * 10 = 200,但尺寸为680×508.

你可以在这里查看被检查的svg元素 – > http://i.stack.imgur.com/xrofn.png

HTML看起来像这样：

<svg>
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/>
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/>
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/>
    ...
    </svg>

应该注意的是,我正在运行node.js和mustache.js.

编辑：
显然SVG在不确定宽度/高度时会做一些事情.手动设置可以解决问题.

<svg height="200" width="200">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/>
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/>
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/>
    ...
</svg>