用波浪边框SVG路径填充div [英] Fill a div with a wavy border SVG path

问题描述

我想用颜色填充< div> 并向边框添加阴影，但我的代码正在执行此操作。我真的需要它在图像中显示的方式。

< svg height =125width =1349> < path d =M -35 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 40 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 190 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 265 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 415 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 490 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 640 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 715 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 865 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 940 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 1090 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < path d =M 1165 100 s 75 -125 150 0stroke =rgb（255,195,56）stroke-width =5fill =rgb（255,195,56）/> < path d =M 1315 100 s 35 50 75 0stroke =rgb（255,195,56）stroke-width =5fill =none/> < / svg>

解决方案

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

< svg height =150width =880> <路径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 zstroke =rgb（255,195,56）stroke-width =5fill = rgb（255,195,56）/>< / svg>

I want to fill the <div> with the color and add shadow to the border but my code is doing this. I actually need it in the way shown in the image.

<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>

解决方案

In your code, you where creating several path elements where each element had one curveTo subpath. Instead, you need one path element with several curveTo subpaths. In your scenario, the simpler quadratic Bezier curve will work well. After the curveTo subpaths, you will need some lineTo subpaths to define the area under the curves. For example...

<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>

这篇关于用波浪边框SVG路径填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！