SVG无法占满容器宽度，请求技术协助

以下是针对性的解决方法和代码调整：

1. 清除全局默认边距 #

浏览器默认给body元素设置了margin，这会导致页面四周出现留白，直接限制SVG的全屏展示。先重置全局样式：

body {
  margin: 0;
  padding: 0;
}

2. 将SVG设为块级元素 #

SVG默认是行内元素，会产生类似文字基线对齐的空隙，设置display: block可以消除这个间隙，确保SVG宽度完全占满容器：

.first-svg {
  width: 100%;
  height: 200px;
  display: block; /* 添加这行 */
}

3. 检查父容器样式 #

如果SVG嵌套在其他容器（如div）中，要确保该父容器没有设置padding或margin，否则也会限制SVG的宽度。

修改后的完整代码 #

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" class="first-svg">
    <path fill="#27187F" fill-opacity="1" d="M0,192L60,170.7C120,149,240,107,360,106.7C480,107,600,149,720,170.7C840,192,960,192,1080,170.7C1200,149,1320,107,1380,85.3L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>

CSS

body {
  margin: 0;
  padding: 0;
}

.first-svg {
  width: 100%;
  height: 200px;
  display: block;
}

内容的提问来源于stack exchange，提问作者Pedro Henrique Ferreira