Question

我正在建立一个网站，它有一个波形的部分，如下所示： PSD

我目前正在使用PSD图像，一个PNG，放在网站上，但我希望波浪有全宽的屏幕， my result

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

＆＃13;

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

＆＃13;

Answer 1

要获得多个波形实例，您可以使用pattern，其中会有一个波形。

我们选择图案的宽度和高度等于一个波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>

Answer 2

您需要为SVG添加包装器
将preserveAspectRatio =“none”添加到每个SVG元素
向SVG元素添加100％宽度和高度的绝对位置

如下所示：

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

CSS

body{
  padding:0;
  margin:0;
}
.svg-wrapper{
  display:block;
  position: relative;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.1)
}
.svg-wrapper svg{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
}

CSS中的全宽波，SVG

2 个答案: