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

Question

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

layoutxhtmlsvgscalingaspect-ratio

103

这似乎应该很简单，但我还是没有理解其中的一些内容。

我想制作一个包含单个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>

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

我错过了什么？

- Miral

莫名其妙的是，我尝试将内联样式属性移动到头部的CSS样式块中，然后它就起作用了。我不知道为什么会有所不同。（虽然我确实需要添加overflow: hidden - 否则会出现4像素的垂直滚动条。） - Miral

而且……哦我的天……SVG属性是区分大小写的！“viewbox”不起作用！ - Jeremy Field

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

这样怎么样：

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