如何缩放SVG图像以填充浏览器窗口？
这似乎应该是容易的，但我只是没有得到的东西。
我想制作一个包含单个SVG图像的HTML页面，该图像可自动缩放以适应浏览器窗口，无需任何滚动，同时保持其高宽比。
例如，目前我有一个1024×768的SVG图像; 如果浏览器的视口是1980×1000那么我希望图像显示在1333×1000（垂直填充，水平居中）。 如果浏览器是800×1000那么我希望它显示在800×600（水平填充，垂直居中）。
目前我有这样的定义：
<body style="height: 100%"> <div id="content" style="width: 100%; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet"> ... </svg> </div> </body> 然而，这是扩大到浏览器的全宽（对于一个宽而短的窗口），并产生垂直滚动，这不是我想要的。
我错过了什么？
怎么样：
html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; bottom:0; left:0; right:0 }
要么：
html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }
我在我的网站上有一个使用（大致）这种技术的例子，虽然有5％的填充，使用position:absolute而不是position:fixed ：
http://phrogz.net/svg/svg_in_xhtml5.xhtml
（使用position:fixed可以防止链接到页面上的子页面定位点的非常边缘的情况，并且overflow:hidden可以确保没有滚动条出现（如果有额外的内容）。
