使 SVG 路径宽度为 100%？

Question

我有一个 SVG 路径动画，当前未扩展 100% 宽度以填充屏幕。我尝试过 viewBox 和其他设置，但似乎没有任何效果。

SVG 确实扩展了 100% 宽度，但路径却没有。

检查笔：https://codepen.io/somestuff/pen/QPJXyb

.wave-container {
  transition: color .8s cubic-bezier(.2, .8, .2, 1), background-color .8s cubic-bezier(.2, .8, .2, 1), fill .8s cubic-bezier(.2, .8, .2, 1);
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 1900px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.wave-container svg {
  position: relative;
  top: -150px;
  left: 8px;
  width: 110% !important;
}

 :not(svg),
 :not(foreignObject)>svg {
  transform-origin: 0px 0px;
}

.wave-container {
  align-self: end;
  width: 100%;
  background: blue;
  display: block;
  width: 100%;
  vertical-align: bottom;
}

.dVVMLq {
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 100%;
}

.wave-container svg path {
  fill: blue;
}

<div class="wave-container">
  <div class="Wave__WaveWrapper-o7bhc-0 wave-container"><svg id="wave" width="100%" height="150px" fill="none"> 
    <path fill="#e5e5e5" d="M 0 59.9547 C 307.185 122.808 534.699 46.5899 847.24 39.6827 C 1159.78 32.7756 1270.98 45.0236 1440 59.9547 V 351.955 H 0 V 59.9547 Z">
    <animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="10s" 
    values="M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z; M0 51.8168C277 169.163 433 131.471 720 51.8168C1007 -27.8372 1199 -5.83717 1440 51.8168V343.817H0V51.8168Z; M0 69.3411C342 69.3411 652 -51.313 994 25.687C1336 102.687 1354 103.687 1440 69.3411V361.341H0V69.3411Z; M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z&nbsp; ">
    </animate></path></svg></div>
</div>

Answer 1

使用 viewBox() 属性，但不使用宽度或高度。SVG 将采用容器的宽度，在本例中：

class="Wave__WaveWrapper-o7bhc-0 wave-container"

尝试用

<svg id="wave" viewBox="0 0 1440 365.38">

注意：@enxaneta 的原始答案