Question

我在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视图坐标。因此，我没有选择将各个路径分开并与它们进行即插即用，这对于移动视图（Do I？）是必需的，即它们与视频框大小相关联。

我怎样才能让我的svg获取视口的宽度和大小，至少为桌面版本。

Answer 1

您可以通过为vh

设置height值来让SVG填充视口高度

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

但这会使你的宽高比变得混乱。你需要保持宽高比还是让SVG填满整个屏幕？

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

将SVG拉伸到视口（容器div）忽略由ViewBox设置的Aspect Ration

1 个答案: