使SVG准确填满整个页面

Question

我正在用纯Javascript开发一个简单的单页应用程序，并希望使用整页SVG作为图形基础。

我本以为放下

authorized_keys

页面正文中的

可以解决问题。几乎可以用，但是效果不佳：

• 该页面具有垂直滚动条（我不希望这是因为<svg id="svg" width="100%" height="100%"></svg> 的含义不应该是“大于100％”，因此没有任何内容可以滚动到该滚动条。）
• SVG的左上角大约是页面的20个像素（两个维度）
• SVG的右侧被截断了-SVG和滚动条之间大约有10个像素列是空白的（我什至不希望也不期望）。

为了清楚地显示这些问题，我添加了Javascript代码以在检索SVG客户坐标后绘制一个带有X的大边界矩形。

100%

关于什么使SVG边界陷于困境？也许是某种边界默认值或CSS默认值，或者类似的奇妙东西？

Answer 1

您可能需要将CSS中的默认边距和填充归零，例如：

html, body, * { 
     margin: 0; 
     padding: 0; 
}