SVG标签占用了额外的空间

Question

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

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

您可以在此处查看经过检查的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">

Answer 1

SVG视口似乎由父元素决定.

http://www.w3.org/TR/SVG/coords.html说明了这一点

SVG用户代理与其父用户代理协商以确定SVG用户代理可以将文档呈现到的视口.

您可以使用widht和height指定SVG视口的大小

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