用波浪形边框的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>

- Shahid

---

请添加您的代码，这是您收到的错误消息吗？您使用的是哪个浏览器？ - PseudoAj

路径坐标（d属性中的值）需要不同。它们是如何为您的代码生成的？ - Max Starkenburg

我认为这些路径对我来说没问题，实际上我需要的是在图片中展示的内容，我无法将此路径置于最前面，也无法填充此路径下方的空间。希望你能理解。如果我的英语不好请见谅。 - Shahid

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>

- web-tiki

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>

- Bobby Orndorff