将 SVG 拉伸到视口（容器 div），不考虑由 viewBox 设置的纵横比答案

【问题标题】：Stretch the SVG To Viewport (container div) Disregarding Aspect Ration Set By viewBox将 SVG 拉伸到视口（容器 div），不考虑由 viewBox 设置的纵横比
【发布时间】：2017-02-16 17:58:11
【问题描述】：

我在 jsbin 上有这个内联 svg。它看起来像：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve" width="100%" height="100%" preserveAspectRatio="none">
// different svg element groups and paths
</svg>

从output 可以清楚地看出，它正在获取视口宽度，但没有获取视口的高度，并且在 svg 的高度之外有一个空白区域（如果打开开发工具，这一点很明显并模拟 iPad 视图或在 chrome 上全屏显示）。期望的需要是使 svg 适合视口。

SVG 已导出，因此路径相框和灯泡相对于整个 svg 视图框坐标。因此，我没有选择分离出单独的路径并即插即用它们，这对于移动视图（是吗？）是必需的，即它们与 viewBox 大小耦合。

如何让我的 svg 获取视口的宽度和大小，至少对于桌面版本。

【问题讨论】：

对于 svg 尝试添加属性 preserveAspectRatio="none"

标签： html css svg browser

【解决方案1】：

您可以通过为height 设置vh 值来让您的SVG 填充视口高度

svg {
   height: 100vh; /* Fill entire viewport height */
}

不过，这会影响您的纵横比。您需要保持纵横比还是让 SVG 填满整个屏幕？

（另外，为了确保填满整个屏幕，您可能希望摆脱默认边距body {margin: 0;}）

【讨论】：

嘿@Digedu，感谢您的回答！是的，它有效，并回答了我的问题。纵横比会被杀死，是的，这很糟糕。我想我应该让我的设计师在项目中分别导出照片 svg 框架、灯泡和电线，这样它们就可以独立于背景如何填充视口，这样我就可以独立处理那些独立的svg图像。不是吗？
不幸的是，我自己对网络上的 SVG 还是很陌生。如果是我尝试实现这一点，我会作弊而不改变 SVG 的高度，而是利用纯色背景颜色：body {background: #243347;} 你的观众不会更聪明;)
计划就是这样！谢谢:)