SVG 标签占用了额外的空间答案

【问题标题】：SVG tag is taking extra spaceSVG 标签占用了额外的空间
【发布时间】：2012-11-09 17:36:37
【问题描述】：

所以我在 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">

【问题讨论】：

标签： html node.js svg mustache

【解决方案1】：

SVG 视口似乎是由父元素决定的。

http://www.w3.org/TR/SVG/coords.html 声明

SVG 用户代理与其父用户代理协商以确定 SVG 用户代理可以在哪个视口中呈现文档。

您可以使用宽度和高度来指定 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>

【讨论】：

【解决方案2】：

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

【讨论】：