SVG 波浪生成器

如何使用SVG 波浪生成器

关于SVG 波浪生成器的常见问题

SVG 波浪生成器会把我的配色和参数上传到服务器吗？

不会。波形由你的参数和种子在浏览器本地现算，SVG、HTML 与 CSS 代码在本地拼装，PNG 在本地画布上绘制后直接下载，没有任何内容发往服务器。本工具只在本地存储里记住导出标签、坐标精度、PNG 倍率、拉伸开关与预览用的相邻区块色这类展示偏好，种子、波形参数、颜色与路径都不保存。

手机浏览器里怎么用 SVG 波浪生成器做分割线？

手机上直接打开本页即可：预设、波形与导出标签都是可触控的按钮，命中区按 44px 设计，窄屏下会自动换行；参数区与预览区改为上下排列。复制的 HTML 或 CSS 代码可以粘到备忘录里发给电脑，下载的 SVG 与 PNG 会进系统的下载目录。

SVG 波浪生成器生成的波浪可以商用吗？

波形不是来自素材库，而是由你选的波形、波数、随机度和种子在本地现算出来的，本站对生成结果不主张任何权利，可以用在网页、海报或应用界面里。本站不提供法律意见，若项目对素材来源有严格审查，请以你所在团队或法务的要求为准。

波浪分割线放到网页上，下面为什么有一条白缝？

最常见的原因是内联 SVG 默认是行内元素，会落在文字基线上，基线下方给字母下沿留的空间就成了一条缝。给 SVG 写 display: block，并给外层容器写 line-height: 0 即可消掉；本工具「HTML 分割线」标签里的代码已经带上这两行。缩放到小数像素时偶尔还会看到亚像素细缝，可以再给 SVG 加 margin-bottom: -1px 让它和下一个区块重叠一像素。

怎么让 SVG 波浪生成器做出的波浪动起来？

展开「流动动画」面板，可以设时长（4~30 秒）、向左或向右流动，以及多层视差（后层更慢），然后切到「流动动画」标签复制或下载动画 SVG。动画用 SVG 自带的 animateTransform 把每层平移一个画布宽，波形本身不变；因为波浪首尾无缝，平移一整个周期后画面与起点相同，循环时看不出跳变。

波浪分割线能当 CSS 背景横向平铺吗？

能。取消「拉伸铺满」后，「CSS 背景」标签输出的是 background-repeat: repeat-x，背景尺寸就是画布宽高（默认 1440px × 240px）。本工具生成的每一层波浪在左右两端高度相同、切线方向也相同，横向平铺时接口处看不出断口。保持「拉伸铺满」时则输出 no-repeat 加 100% 宽，波浪会随元素宽度拉长或压扁。

波浪生成器怎么复现同一条波浪？

记下种子，以及波形、波数、随机度、相位、层数和层间距这几个参数即可。随机源是确定性的：同一个种子配同一组参数，在任何浏览器、任何设备上都得到逐字节相同的路径。「随机一个」会生成一个 8 位的新种子，「上一个」可以回到本次会话里看过的波浪。正弦波形不使用种子，参数相同永远是同一条。

波浪分割线怎么放在区块顶部（倒过来）？

把「填充方向」切到「填充在上（放区块顶部）」，波浪上方是实心填充、下方透明，放在下一个区块的顶部即可；导出的 HTML 片段会带上「放在区块顶部」的注释，CSS 背景的位置也会改成 left top。想让波峰左右对调，可以再勾「水平翻转」。

SVG 波浪生成器和 clip-path 切波浪边有什么区别？

clip-path 是把元素自己的底边裁成波浪形，polygon 只能连折线，要做平滑曲线得用 path()，而 path() 的坐标是固定像素，元素一变宽就对不上。本工具生成的是一块独立的波浪 SVG，放在两个区块之间，宽度随容器拉伸，还能叠多层、做流动动画。只想把卡片边缘切成斜角或折线时，可以用 Clip-path 生成器。

SVG 波浪生成器导出的波浪怎么改颜色？

最简单的是回到本页改「填充色」后重新复制。若用的是「HTML 分割线」里的内联 SVG，也可以直接改每条 path 上的 fill 属性，或者在页面 CSS 里写 .wave-divider path { fill: … } 覆盖。用 CSS 背景时颜色写死在 data URI 里，外部 CSS 改不了，只能重新生成。颜色带透明度时会输出 fill-opacity。

SVG 波浪生成器参数速查表

本工具生成的是网页区块之间那条带填充的波浪边，也叫波浪分隔线、区块分割线，有人叫它波浪边框或网页波浪背景；建站工具里常叫 shape divider，英文搜索时多用 svg wave generator 或 wave generator，类似 getwaves 的在线工具。四种波形的区别如下：

波数 1~20，随机度 0~100，层数 1~5，画布宽 320~2560px、高 40~600px。默认画布 1440px 宽、4 个周期，每个周期约 360px；默认波浪的 SVG 约 480 字节，坐标精度从 1 位降到 0 位可再省 90 字节。五个预设一键套用波形与层数，不改颜色和画布：

SVG 波浪是怎么画出来的：波峰波谷加水平切线

本工具先在画布宽度里排出 2 × 波数 个交替的波峰与波谷，每个点有一个横坐标和一个高度。随机度为 0 时它们等距、等高；随机度越大，横坐标最多偏移相邻间距的 30%，高度最多偏离 45%。这两个上限保证了波峰永远比相邻的波谷高、点的先后顺序不会被打乱。

相邻两点之间用一段三次贝塞尔曲线连接，两个控制点分别和各自的端点同高，也就是说曲线在每个波峰、波谷处的切线都是水平的。这样画出的曲线是横坐标的单值函数，不会回头、不会打结；而且它的最高点与最低点恰好就是这些波峰和波谷，不会像 Catmull-Rom 那样冲出控制点，所以波峰不会被画布顶边切平。尖峰波形把贝塞尔换成直线，阶梯波形则在两点正中间放一条竖边。

正弦波浪用的也是这条曲线：控制柄长度取相邻间距的 0.3643 倍时，它与半个余弦曲线的最大偏差约为波带高度的万分之二，肉眼看不出区别，但严格说它是正弦近似，不是数学意义上的正弦函数。

为什么生成的波浪首尾能无缝衔接

波峰波谷是按「一个画布宽为一个大周期」生成的：本工具把最后一个点平移一个画布宽放到最左边、把第一个点平移一个画布宽放到最右边，连成一条比画布稍长的曲线，再在左边缘和右边缘两处把它精确切开（贝塞尔段用二分法求出切点，再用 de Casteljau 算法切分）。

左右两个切点切到的是同一条曲线的同一个相位，所以起点和终点高度相同、切线方向也相同。这正是 CSS 背景可以 repeat-x 横向平铺而看不出接缝的原因，也是流动动画能无缝循环的前提。单测对每种波形、每个层数都断言了这一点；唯一的例外是坐标精度取 0 位时，起止高度在四舍五入后可能差不到 1 个像素。

波浪分割线怎么用：内联 SVG、CSS 背景与留缝问题

最常见的用法是把「HTML 分割线」标签里的代码粘到两个区块之间。下面是一条 2 个周期的正弦波浪的完整写法：外层 div 写 line-height: 0，SVG 写 display: block、宽 100%、固定高度。

<!-- 放在区块底部 -->
<div class="wave-divider" aria-hidden="true">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none">
    <path d="M 0 0 C 131 0 229 72 360 72 C 491 72 589 0 720 0 C 851 0 949 72 1080 72 C 1211 72 1309 0 1440 0 L 1440 120 L 0 120 Z" fill="#3f6fe8"/>
  </svg>
</div>

<style>
.wave-divider { line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: 120px; }
</style>

少了这两行，内联 SVG 会像文字一样落在基线上，基线下方给字母下沿留的空间就成了波浪下面的一条白缝。浏览器缩放到小数像素时，相邻两个区块之间偶尔还会露出一条亚像素细缝，给 SVG 加 margin-bottom: -1px 让它和下一个区块重叠一像素即可。

不想改 HTML 时，可以把波浪做成 CSS 波浪背景：复制「CSS 背景」标签的四行声明给区块即可，波浪图被编码成 data URI 放进 background-image，位置贴在区块底边（顶部方向时贴顶边）。另一种做法是用 Clip-path 生成器 把区块自己的边裁成折线；它裁掉的是元素本身，而且 polygon 只能连直线，想要平滑的波浪背景仍然是 SVG 更合适。

多层波浪怎么叠：层间距、配色与前后顺序

层数大于 1 时，所有层共享同一条「波带」：波带高度 = 画布高 × 波带占比，单层波高 = 波带高 ÷ (1 + (层数 − 1) × 层间距)，第 j 层整体下移 j × 单层波高 × 层间距。这样最后面那层的波峰贴着波带顶，最前面那层的波谷贴着波带底，波带以下全部是最前层的实心填充。以「三层叠浪」预设为例，默认画布高 240px、波带占比 60% 时，波带高 144px，单层波高约 72px，三层的基准分别下移 0px、36px、72px。

颜色在后层色与前层色之间逐通道线性插值，透明度也一起插值；绘制顺序是后层先画、前层后画，导出的 SVG 里第一条 path 就是最后面那层。随机波形的每一层用的是同一个种子派生出的不同序列，所以各层起伏错开；正弦波形没有随机，就靠每层错开一点相位。层间距取 0 时，各层叠在同一个基准上，只靠种子或相位区分。

波浪流动动画：只平移不变形的循环原理

很多波浪动画是让 path 的 d 在几组关键帧之间变形，这要求每一帧的命令结构完全一致。本工具的流动波浪换了一种思路：把每层路径在两个画布宽上画两遍（第二遍就是第一遍平移一个画布宽），再用 SMIL 的 animateTransform 把整组向左平移一个画布宽。平移满一个周期时，画面与起点完全相同，于是首尾无缝地循环，波形本身从不变形。

SVG 波浪动画默认时长 12 秒；开启多层视差时，最前层用设定时长，越往后越慢，最后面那层是设定时长的 1.5 倍——3 层时分别是 18、15、12 秒。SMIL 的 animateTransform 在当前版本的 Chrome、Firefox 与 Safari 中可用，SVG 当作 img 或 CSS 背景引用时也会播放；但「减少动态效果」这一系统设置只能由引用它的页面自己处理，本页预览在该设置开启时保持静止。

只要纯色渐变的区块背景，可以先用 CSS 渐变生成器 调好再配上波浪；想要封闭的有机形状装饰，用 SVG Blob 生成器；要满屏的波浪线底纹，请用 SVG 背景纹理生成器。颜色想换成别的格式，可以用 颜色格式转换 先换算好。

要把已有的 SVG 文件转成 PNG、或者编辑图片，请到姊妹站在线图片处理处理；本工具只导出自己生成的波浪。