CSS，SVG中的全宽波

Question

我正在建立一个网站，它有一个波形的部分，像这样： PSD

我目前正在使用 PSD 图像（PNG 格式）放置在网站上，但我希望波形具有屏幕的全宽， 我的结果

我想要一个 CSS 解决方案，所以我研究了一下，并且 talez 可以使用 SVG，但是我没有成功创建

<svg viewbox="0 0 100 25">
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>

Answer 1

要获得多个 wave 实例，您可以使用pattern其中只有一个 wave。

我们选择图案的宽度和高度等于一波的宽度和高度，width = "100"然后height = "25"

用 填充矩形区域pattern。随着viewBox = "0 0 100 25"模式将适合一次。

<svg  viewBox="0 0 100 25">
 <defs>
      <pattern id="Wave"
             x="0" y="0" width="100" height="25"
             patternUnits="userSpaceOnUse" >
            <path d="M0 25 0 6C20 9 38 11 55 7 72 4 87 4 100 6l0 19z" id="path4" fill="#9eaffd"/>
      </pattern>
   </defs>
  <rect width="100%" height="100%" fill="url(#Wave)" />
</svg> 

要获得 4 个波浪，您需要使图案适合长度的四倍。要做到这一点，增加width四倍——viewBox = "0 0 400 25"

<svg  viewBox="0 0 400 25">
 <defs>
      <pattern id="Wave"
             x="0" y="0" width="100" height="25"
             patternUnits="userSpaceOnUse" >
            <path d="M0 25 0 6C20 9 38 11 55 7 72 4 87 4 100 6l0 19z" id="path4" fill="#9eaffd"/>
      </pattern>
   </defs>
  <rect width="100%" height="100%" fill="url(#Wave)" />
</svg>