当 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%;
}

查看更新的小提琴：https://jsfiddle.net/74cc07m1/1/

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