背景过渡用SVG波形无法拉伸至全屏宽度，设100%仅居中如何解决

根因分析 #

SVG默认自带的preserveAspectRatio属性默认值为xMidYMid meet，该属性会强制保持SVG的原始宽高比，将图形居中展示在容器内，不会出现拉伸变形。这就是你设置width:100%后图形仅居中、无法填充满宽度的原因。

修复方案 #

给<svg>标签添加preserveAspectRatio="none"属性，关闭宽高比锁定，允许SVG拉伸适配容器的尺寸，同时给SVG补充width: 100%的样式即可。

修复后代码 #

<div class="waves" style="height: 244px;width: 100%;overflow-x: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" style="display:block;height:100%;width: 100%;">
    <path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
style="height:100%;width:100%;display:block;"></path>
  </svg>
</div>

修改后不管是小屏还是桌面端大屏场景，SVG都会自动拉伸填充满外层容器的全部可用宽度，实现目标波浪过渡效果。

内容的提问来源于stack exchange，提问作者HamsterRecords