Html SVG未填充移动视图上的整个视口

我的网站上所有的wave SVG都有问题。有人知道如何让SVG填充整个视口/屏幕宽度吗

我过去常造波浪，用潜水器

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

   <main></main>

   <svg>
</div>
<footer>

//对齐内容：之间的间距

两者之间的空间是将svg推到顶部和底部，并将文本内容放在中间

---

这可能是生成的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;
}

---

这可能是由于SVG

viewBox

纵横比与指定（或由浏览器计算）SVG

width

和

height

的纵横比之间存在细微差异造成的

尝试将

preserveAspectRatio=“none”

添加到该SVG的

元素中

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

或者可能：

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

是否在svg元素中使用

main

元素？另外：你有没有没有没有

viewBox

属性的svg元素？没有，我发布的代码只是为了可视化，我在手机上写了这个。主元素位于svg元素之外。svg有一个viewBox属性。请编辑该问题，使其有一个左侧没有间隙，右侧有间隙。是否有在线示例？我想看到一个链接来找到你最好的工作解决方案。也许可以尝试

width:calc（100%+4px）现场示例：更新了答案。