我有这个内联 svg在 jsbin 上。它看起来像:
<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 可以清楚地看出，它采用了视口(viewport)宽度，但没有获得视口(viewport)的高度，并且在 svg 的高度之外有一个空白区域(如果打开开发工具并模拟 iPad View 或在 chrome 上全屏显示，这很明显) .期望所需要的是让 svg 适合视口(viewport)。
SVG 已导出，路径相框和灯泡相对于整个 svg viewbox 坐标。因此，我无法选择分离出单独的路径并即插即用，这对于移动 View 来说是必需的(是吗？)，即它们与 viewBox 大小相关联。
至少对于桌面版本，我怎样才能让我的 svg 获取视口(viewport)的宽度和大小。
最佳答案
您可以通过为 height 设置 vh 值来让您的 SVG 填充视口(viewport)高度
svg {
height: 100vh; /* Fill entire viewport height */
}
但这会影响您的宽高比。您需要保持纵横比还是只让 SVG 填满整个屏幕？
(另外，为了确保填满整个屏幕，您可能需要去掉默认边距 body {margin: 0;} )
关于html - 将 SVG 拉伸(stretch)到视口(viewport)(容器 div)，忽略由 viewBox 设置的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42266008/