如何缩放SVG图像以填充浏览器窗口? [英] How to scale SVG image to fill browser window?
问题描述
这似乎应该很容易,但我没有得到什么.
This seems like it ought to be easy, but I'm just not getting something.
我想制作一个包含单个SVG图像的HTML页面,该图像会自动缩放以适合浏览器窗口,而无需任何滚动并保持其宽高比.
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.
例如,目前我有一个1024x768 SVG图片;如果浏览器视口为1980x1000,则我希望图像以1333x1000显示(垂直填充,水平居中).如果浏览器是800x1000,那么我希望它以800x600显示(水平填充,垂直居中).
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.
我想念什么?
推荐答案
怎么样:
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
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
(使用position:fixed
可以防止在极端情况下链接到页面上的子页面锚点,并且overflow:hidden
可以确保任何滚动条都不会出现(以防您有多余的内容. )
(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屋!