SVG没有填充移动视图上的整个视口答案

【问题标题】：SVG not filling whole Viewport on mobile viewSVG没有填充移动视图上的整个视口
【发布时间】：2020-08-16 23:43:12
【问题描述】：

我的网站上的所有 Wave SVG 都有问题。有谁知道如何让 SVG 填满屏幕的整个视口/宽度？

<nav>
<div> //align-content: space-between
   <svg>

   <main></main>

   <svg>
</div>
<footer>

中间的空间是将svg推到顶部和底部并获得中心的文本内容。

【问题讨论】：

【解决方案1】：

这可能是生成的 SVG 文件问题。你可以用简单的 CSS 技巧来管理它。

.svg-parent-div {
overflow: hidden;
width: 100%;
}

svg {
width: calc(100% + 2px);
margin-left: -1px;
}

更新

为您的案例提供准确的代码

body {
overflow-x: hidden;
}

svg {
width: calc(100% + 2px);
max-width: calc(100% + 2px); /*important in your case*/
margin-left: -1px;
}

【讨论】：

【解决方案2】：

这可能是由于 SVG viewBox 的纵横比与指定的（或由浏览器计算的）SVG width 和 height 的纵横比之间的细微差别造成的。

尝试将preserveAspectRatio="none" 添加到该SVG 的<svg> 元素中。

<svg ...  viewBox="..." preserveAspectRatio="none">

或者可能：

<svg ...  viewBox="..." preserveAspectRatio="xMidYMin slice">

【讨论】：