宽度增大时SVG波形变形问题求助

我对SVG了解有限，目前遇到一个问题：小屏幕时SVG曲线平滑，但屏幕宽度增大后，曲线变得凹凸不平。尝试调整了部分参数但无效，想了解需要调整哪个参数来解决此问题。

相关代码 #

<div class="position-absolute w-100">
  <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
    <defs>
      <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
    </defs>
    <g class="moving-waves">
      <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
      <use xlink:href="#card-wave" x="-1148" y="1234" fill="rgba(255,255,255,0.35)"></use>
      <use xlink:href="#card-wave" x="-1148" y="1111" fill="rgba(255,255,255,0.25)"></use>
      <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
      <use xlink:href="#card-wave" x="1148" y="113" fill="rgba(255,255,255,0.15)"></use>
      <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
    </g>
  </svg>
</div>

效果对比 #

• 小屏幕平滑曲线效果：
  
• 大屏幕变形曲线效果：
  

问题原因与解决方法 #

核心问题

1. shape-rendering="auto"：浏览器在拉伸SVG时会自动启用性能优化，牺牲曲线精度导致变形；
2. 固定长度的路径：当前波浪路径是固定重复单元，大屏幕拉伸时会强制拉长单个波浪，破坏平滑形态；
3. preserveAspectRatio="none"：完全拉伸适配容器，进一步放大了路径变形的问题。

具体调整方案

1. 强制高精度渲染
   修改SVG的shape-rendering属性为geometricPrecision，让浏览器优先保证曲线渲染精度，避免拉伸失真：

   <svg class="waves waves-sm" ... shape-rendering="geometricPrecision">
   

2. 优化波浪路径的重复性
   把固定长度的路径改成单个波浪周期，用SVG的pattern实现无限重复，这样无论屏幕多大，波浪形态都保持一致：

   <defs>
     <!-- 单个波浪周期的路径 -->
     <pattern id="wave-pattern" width="176" height="84" patternUnits="userSpaceOnUse">
       <path d="M0 44c30 0 58-18 88-18s58 18 88 18v44h-176z" fill="rgba(255,255,255,0.99)"></path>
     </pattern>
   </defs>
   <!-- 用矩形填充整个容器，应用重复波浪 -->
   <rect width="100%" height="100%" fill="url(#wave-pattern)"></rect>
   

   （注意：如果需要多层不同透明度的波浪，可创建多个pattern分别应用）

3. 调整拉伸规则（可选）
   如果不需要完全拉伸，可修改preserveAspectRatio为xMidYMid slice或xMidYMid meet，保持波浪比例，避免过度拉伸：

   <svg class="waves waves-sm" ... preserveAspectRatio="xMidYMid slice">
   

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