如何缩放 SVG 图像以填充浏览器窗口？
Posted
技术标签:
【中文标题】如何缩放 SVG 图像以填充浏览器窗口？【英文标题】：How to scale SVG image to fill browser window? 【发布时间】：2011-08-04 08:03:23 【问题描述】：这似乎应该很容易，但我只是没有得到任何东西。
我想制作一个包含单个 SVG 图像的 html 页面，该页面会自动缩放以适应浏览器窗口，无需任何滚动，同时保持其纵横比。
例如，目前我有一个 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"
viewBox="0 0 1024 768"
preserveAspectRatio="xMidYMid meet">
...
</svg>
</div>
</body>
但是，这会放大到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。
我错过了什么？
【问题讨论】：
莫名其妙地，我尝试将内联样式属性移动到头部的 CSS 样式块中，然后它就起作用了。我不知道为什么它有所作为。 （虽然我确实需要添加溢出：隐藏——否则会有一个 4 像素的垂直滚动。） 而且......哦，我的上帝...... svg 属性区分大小写！viewbox 不起作用！
【参考方案1】：
怎么样：
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 可以确保不会出现滚动条（以防您有额外的内容。 )
【讨论】：
还有一个迟到的 +1 表示将该链接保留 2 年。 请注意，此解决方案依赖于viewBox 属性。
链接在将近 4 年后仍然在那里。干得好，@Phrogz！
是的，谢谢@Phrogz...为了以防万一它出现故障，我制作了一个codepen版本：codepen.io/cyanos/full/XbXxOQ
并且 +1 超过 8 年以上是关于如何缩放 SVG 图像以填充浏览器窗口？的主要内容，如果未能解决你的问题，请参考以下文章