SVG在移动视图中不能填满整个视口。

Question

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

我用了 我使用的Wave SVG生成器

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

   <main></main>

   <svg>
</div>
<footer>

中间的空间是为了把SVG推到顶部和底部，让文字内容在中间。

Answer 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;
}

Answer 2

这可能是由于SVG和SVG之间的轻微差异造成的。viewBox 纵横比，以及指定的（或由浏览器计算的）SVG的纵横比。width 和 height.

尝试添加 preserveAspectRatio="none" 至 <svg> 元素的SVG。

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

或可能。

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