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

这似乎应该很容易，但是我没有得到任何东西。

我想制作一个包含单个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"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

但是，这会放大到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。

我想念什么？

— 米拉尔
source

莫名其妙的是，我尝试将内联样式属性移动到头部的CSS样式块中，然后工作了。我不知道为什么会有所作为。（尽管我确实需要添加溢出：隐藏-否则会有4像素的垂直滚动。）

— Miral

175

怎么样：

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可以确保永远不会出现滚动条（以防您有多余的内容。）

— 佛罗兹
source

对于离开该链接2年的用户，则晚+1。

— msanford

请注意，此解决方案依赖于viewBox属性。

— ubershmekel 2014年

近四年后，链接仍然存在。干得好，@ Phrogz！

— 理查德（Richard）

是的，谢谢@Phrogz ...以防万一它掉了，我制作了一个codepen版本：codepen.io/cyanos/full/XbXxOQ

— Jay

+1超过8年

— Sudhir Kaushik