html - SVG 在填满整个浏览器窗口时显示 viewBox 之外的内容

Question

我想让内联 SVG 填充浏览器窗口的整个宽度。 SVG 在 vi​​ewBox 之外有一些内容。这是 SVG 文件:http://pastebin.com/F5irDNai

当我将宽度设置为 100% 时，viewBox 之外的内容变得可见:

svg {
  width: 100%;
}

请参阅此 jsfiddle:https://jsfiddle.net/3w2hy8kv/1/红色矩形是 viewBox 的边界。

我想要的是让 SVG 的 viewBox 水平填充整个浏览器窗口，而不显示 viewBox 之外的内容。这可能吗？

Answer 1

感谢@Ruskin 和 SVG viewbox showing showing off-screen items谁让我朝着正确的方向前进。

添加到 svg 元素的属性:

preserveAspectRatio="xMidYMin slice"

它也可以使用 JavaScript 添加此属性。

CSS:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#theSVG svg {
  width: 100%;
  height: 100%;
}

查看更新的 fiddle :https://jsfiddle.net/74cc07m1/1/

编辑:使用优化的 SVG 更新了 Fiddle:https://jsfiddle.net/74cc07m1/2/