用波浪边框SVG路径填充div

Question

我想填充<div>颜色并添加阴影到边框,但我的代码正在这样做.我实际上需要它以图像中显示的方式.

<svg height="125" width="1349">
  <path d="M -35 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 40 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 190 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 265 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 415 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 490 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 640 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 715 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 865 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 940 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 1090 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 1165 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 1315 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  Sorry, your browser does not support inline SVG.
</svg>

Answer 1

对于这样的形状,您可以使用svg模式并在模式中填充矩形宽度,如以下示例所示:

html,body{margin:0;padding:0;}
div{
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size:cover;
  overflow:hidden;
}
svg{display:block;}

<div>
  <h1>title</h1>
  <p>whatever content<br/>with several lines</p>
  <svg viewbox="0 0 60 10">
    <pattern x="-7.5" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
      <path d="M0 10 V5 Q2.5 2.5 5 5 T10 5 V10" fill="#FFC338" />
    </pattern>
    <rect x="0" y="0" width="60" height="10" fill="url(#waves)"/>
  </svg>
</div>

Answer 2

在您的代码中,您可以创建多个路径元素,其中每个元素都有一个curveTo子路径.相反,您需要一个具有多个curveTo子路径的路径元素.在您的场景中,更简单的二次贝塞尔曲线将很好地工作.在curveTo子路径之后,您将需要一些lineTo子路径来定义曲线下的区域.例如...

<svg height="150" width="880">
  <path d="M 0 100 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0  q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 l 0 50 l -880 0 z" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)"/>
</svg>