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

Question

我希望内联SVG填充浏览器窗口的整个宽度。 SVG在viewBox之外有一些内容。这是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%;
}

请参阅更新的小提琴：https://jsfiddle.net/74cc07m1/1/

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