Softonic

SVG 波浪生成器

步 1 / 2
下一步

曲线波浪是几乎每个着陆页迟早都会用到的分区隔断。此生成器对一条平滑的正弦曲线进行采样，生成一条填充的 <path>，让你调节振幅、频率和垂直位置，并用任意纯色填充，无需额外 CSS 即可直接放在两个版块之间。复制内联 SVG 代码，直接粘贴到你的页面即可。

如何生成 SVG 波浪

  1. 1

    设置颜色

    用颜色选择器为波浪选择任意纯色填充。

  2. 2

    调节振幅

    提高振幅（0 到 150）可让曲线更深，降低则得到轻柔的起伏。

  3. 3

    设置频率

    在宽度方向上选择 1 到 8 个周期。周期越多，图案越密、波浪越多。

  4. 4

    选择在上或在下

    把填充锚定在下边缘可做页脚波浪，锚定在上边缘可做页眉波浪。

  5. 5

    复制 SVG

    复制内联 SVG 代码，粘贴到你的 HTML 或 CSS 背景中。

波浪真正派上用场的地方

  • 分区过渡。 放在彩色主视觉与白色正文之间，让视线顺畅流动，而不是撞上一条硬线。
  • 页脚。 弯曲的上边缘柔化了深色的链接区块。
  • 价格卡片。 无需整幅背景图，就能做出一个淡淡上色的边角。
  • 主视觉横幅。 下边缘的波浪把读者的视线引向正文。

路径结构

生成器对正弦曲线采样，在 1440 x 320 的 viewBox 内生成一条填充的 <path>：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

路径以短直线段沿宽度方向前进，勾勒出正弦波，然后向下边缘（或上边缘）闭合，形成纯色填充。提高振幅会加宽波峰和波谷，增加周期则在宽度上塞入更多波形。

让它自适应

  • SVG 已设置 preserveAspectRatio="none"，因此波浪会拉伸以填满任意宽度。
  • 它自带 width="100%"；用 CSS（height: auto 或固定值）按需控制高度。
  • 若要叠加波浪营造层次，请在你自己的 CSS 中放两份副本，采用绝对定位，并为每一份设置不同的颜色和不透明度。

无障碍

波浪是装饰性的。添加 aria-hidden="true" 和 role="img"，让屏幕阅读器跳过该元素，并把所有有意义的内容都放在真正的相邻 HTML 元素中。

常见问题

当你希望填充色响应 CSS 变量（深色模式、主题）时，把 SVG 内联到 HTML 中。当波浪纯粹是装饰、且你希望浏览器单独缓存它时，使用 background-image。

能。它是带 preserveAspectRatio="none" 的矢量 <path>，因此可缩放到任意宽度而不出现锯齿，这与放大就会发糊的栅格图不同。

可以。用 SVG 包裹路径，通过 CSS 关键帧为其 d 属性或 transform: translateX() 添加动画。让动作保持克制；自动播放的波浪动画很快就会显得过时。

通常远小于 1 KB，因为它是一条单一路径、只有一种填充色。这相比任何等效的 PNG 都只是极小的一部分。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

HTML到文本转换器

从标记中剔除所有HTML标签及元素，生成适用于电子邮件客户端、数据分析及索引处理的纯文本格式。

IBAN 验证工具

在本地检查 IBAN 的注册国家长度、国内结构和 MOD 97-10 校验位。不上传数据，也不表示账户真实存在。

此工具还提供其他语言版本