如何缩放 SVG 图像填充浏览器窗口？

这看起来应该很简单，但我就是没有收获。

我想创建一个 HTML 页面，其中包含一个 SVG 图像，该图像可以自动伸缩以适应浏览器窗口，不需要任何滚动，同时保持其高宽比。

例如，现在我有一个1024x768的 SVG 图像; 如果浏览器视口是1980x1000，那么我希望图像显示为1333x1000(垂直填充，水平居中)。如果浏览器是800x1000，那么我希望它显示在800x600(水平填充，中心垂直)。

目前我对它的定义是这样的:

<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>

然而，这是扩展到全宽的浏览器(为一个宽但短的窗口)和产生垂直滚动，这不是我想要的。

我错过了什么？

88861 次浏览
小开
最佳答案

How about:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

Or:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

I have an example on my site using (roughly) this technique, albeit with 5% padding all around, and using position:absolute instead of position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Using position:fixed prevents a very edge-case scenario of linking to a sub-page anchor on the page, and overflow:hidden can ensure that no scroll bars ever appear (in case you have extra content.)


提交答案