Question

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

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

您可以在此处查看经过检查的svg元素 - ＆gt; 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>

Answer 2

＆lt; svg＆gt;上的width和height属性的默认值element为100％，这意味着SVG视口取决于它所在的容器。通常这由CSS决定。

您可以根据需要设置宽度和高度属性，但也可以仅使用CSS，如this example中所示。

SVG标签占用了额外的空间

2 个答案: