如何缩放 SVG 图像以填充浏览器窗口? [英] How to scale SVG image to fill browser window?
问题描述
这看起来应该很容易，但我只是没有得到一些东西.
我想制作一个包含单个 SVG 图像的 HTML 页面，该图像会自动缩放以适应浏览器窗口，无需任何滚动并同时保留其纵横比.
例如，目前我有一个 1024x768 的 SVG 图像；如果浏览器视口为 1980x1000，那么我希望图像以 1333x1000 显示(垂直填充，水平居中).如果浏览器是 800x1000，那么我希望它以 800x600 显示(水平填充，垂直居中).
目前我是这样定义的:
<div id="content" style="width: 100%; height: 100%"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"宽度="100%" 高度="100%"viewBox="0 0 1024 768"preserveAspectRatio="xMidYMid meet">...</svg>然而，这会放大到浏览器的整个宽度(对于宽而短的窗口)并产生垂直滚动，这不是我想要的.
我错过了什么?
怎么样:
html, body { margin:0;填充:0;溢出:隐藏 }SVG { 位置:固定；顶部:0；底部:0;左:0;右:0 }或者:
html, body { margin:0;填充:0;溢出:隐藏 }SVG { 位置:固定；顶部:0；左:0;高度:100%；宽度:100% }我的网站上有一个使用(粗略)这种技术的示例，尽管周围有 5% 的填充，并且使用 position:absolute 而不是 position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml
(使用 position:fixed 可以防止链接到页面上的子页面锚点的极端情况，而 overflow:hidden 可以确保永远不会出现滚动条(以防您有额外的内容.)
This seems like it ought to be easy, but I'm just not getting something.
I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.
For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally). If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).
Currently I have it defined like so:
<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>
However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.
What am I missing?
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.)
这篇关于如何缩放 SVG 图像以填充浏览器窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
