5

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

2 回答 2

7

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>
于 2012-11-03T16:11:56.850 回答
1

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

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

于 2012-11-09T09:36:37.840 回答