波浪 SVG 生成器
调整波浪的大小、形状和颜色,为网页创建分隔线或背景。复制或保存 SVG 或背景 CSS,也可以保存 PNG 图像。
功能介绍
调整形状和颜色
调整波浪高度、数量、位置和填充方向,并使用一种或两种颜色创建波浪。
获取适合需求的格式
复制并保存 SVG 代码或 CSS 背景,也可以保存为 PNG 图像。
使用方法
选择起始形状
直接调整数值,或从“选择模板”中选择相似形状。
调整尺寸和颜色
指定宽度、高度、振幅和波浪数量。在高级设置中调整起始位置和中心高度。
生成并检查 SVG
检查生成的波浪形状和透明区域。更改设置后重新生成。
获取所需格式
选择 SVG 或 CSS 背景进行复制或保存,也可以保存 PNG。
适用场景
分隔页面区块
在内容区块之间或页脚上方创建波浪形分隔线。
匹配网站配色
使用纯色或渐变创建与页面配色相匹配的背景素材。
波浪形状和保存格式
振幅和波浪数量
振幅表示垂直变化幅度,波浪数量表示整个宽度内的周期数。此功能不用于显示音频波形。
波浪位置和裁切区域
使用相位更改起始位置,使用中心高度更改垂直位置。图像范围之外的部分会被裁切。
选择 SVG 或 PNG
SVG 以矢量形式表示形状。PNG 会按指定的像素尺寸保存图像,并保留透明区域。
如何放置 CSS 背景
CSS 用于指定背景图像。请为使用该背景的元素设置宽度和高度,以提供背景的显示区域。
常见问题
可以调整波浪形状和颜色吗?
你可以指定数值和颜色。选择“使用两种颜色”可设置第二种颜色和渐变角度。
选择模板后,当前设置会怎样?
所选模板的设置会替换当前设置,包括宽度、高度和颜色。选择模板后,请按需调整数值。
更改设置时,预览会更新吗?
更改后,请选择“生成 SVG”以检查结果。之前生成的结果将不再可供显示或保存。
SVG 是精确的正弦波吗?
波浪采用平滑的三次曲线进行近似绘制,并非用于数学测量或音频分析的波形。
文件处理
- 输入
- 根据数值波浪设置和颜色创建。无需选择图像。
- 输出
- wave.svg、wave.css 和 wave.png。也可以复制 SVG 和 CSS。