如何让SVG路径元素适配SVG容器宽度以实现全屏波浪动画

我看了你的代码，问题核心在于SVG没设置自适应的视图属性，导致path没法跟着父元素的200%宽度铺满屏幕。下面是调整后的完整代码，以及关键修改点的解释：

修改后的代码 #

CSS部分 #

@keyframes move_wave { 
  0% { transform: translateX(0) translateZ(0) scaleY(1) } 
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 
  100% { transform: translateX(-50%) translateZ(0) scaleY(1) } 
}
.waveWrapper { 
  overflow: hidden; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  top: 0; 
  margin: auto; 
}
.waveWrapperInner { 
  position: absolute; 
  width: 100%; 
  overflow: hidden; 
  height: 100%; 
  bottom: -1px; 
}
.wave { 
  position: absolute; 
  left: 0; 
  width: 200%; /* 维持你需要的铺满屏幕宽度 */
  height: 100%; 
  background-repeat: repeat no-repeat; 
  background-position: 0 bottom; 
  transform-origin: center bottom; 
}
.waveMiddle { 
  background-size: 50% 120px; 
}
.waveAnimation .waveMiddle { 
  animation: move_wave 10s linear infinite; 
}

HTML部分 #

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner">
    <div class="wave waveMiddle">
      <svg width="100%" viewBox="0 0 1600 122">
        <path d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
      </svg>
    </div>
  </div>
</div>

关键修改说明 #

• 给SVG添加viewBox属性：viewBox="0 0 1600 122"对应你原始path的尺寸（path的x坐标最大到1599.995，高度到122），这个属性让SVG能根据父容器宽度自动缩放内部path，不管父容器是100%还是200%宽度。
• 移除path的width和height属性：path不需要单独设置宽高，它会自动继承SVG的视图范围，跟随SVG一起缩放。
• 保持SVG的width为100%：这样SVG会完全填满父元素.wave的200%宽度，结合viewBox，path就能完美铺满整个屏幕，配合你的移动动画实现无缝波浪效果。

调整后，你的波浪动画就能铺满整个屏幕，path会自适应SVG的200%宽度范围，动画平移效果也能正常工作啦。

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