SVG 背景图案生成
下载用于网页背景平铺的圆点、网格或斜线 SVG 单元。
浏览器本地处理输入图案参数输出SVG
- 1添加输入
- 2调整设置
- 3获取结果
工具输入和文件在当前浏览器处理，不会上传。
开始之前
选择图案、尺寸和颜色，在大面积平铺预览中检查重复效果，再下载精确的单单元 SVG，并按原生像素尺寸用作 CSS 背景。
如何使用
- 选择圆点、网格或斜线，并设置单元尺寸、圆点半径或线宽、前景色和背景色。
- 生成图案，在较大的平铺预览中检查密度与单元边界。
- 下载 result.svg，或复制 SVG 与 CSS 示例；实际使用时保持文件路径和单元的原生尺寸。
支持范围与限制
仅支持圆点、网格和斜线；单元为 4–200px 整数，圆点半径或线宽为 0.5px 至单元尺寸的一半，颜色须为六位 HEX。
保持原生尺寸平铺可使单元对齐。百分比背景尺寸或非整数缩放可能出现浏览器接缝；文字对比度需在最终页面核对。
操作示例
示例输入
{"pattern":"dots","size":24,"radius":2,"color":"#0b876f","background":"#f3f7f5"}示例参数
{"pattern":"dots","size":24,"radius":2,"color":"#0b876f","background":"#f3f7f5"}示例输出
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="#f3f7f5"/><circle cx="12" cy="12" r="2" fill="#0b876f"/></svg>
出现问题时
单元尺寸应为 4–200px 整数，圆点半径或线宽为 0.5px 至尺寸的一半，两种颜色均须为六位 HEX。
常见问题
下载文件包含什么？
result.svg 只包含一个指定像素宽高的图案单元；页面预览会在较大区域重复它。
任意 CSS 背景尺寸都能无缝吗？
按原生尺寸平铺时图案单元可以对齐；百分比或非整数缩放可能产生浏览器接缝，请在最终页面检查。
会自动检查文字对比度吗？
不会。请在实际页面中检查文字可读性和对比度；预览用于检查图案密度和平铺对齐。
输入会发送到服务器吗？
不会。图案在浏览器本地生成；离开页面前请保存所需的 SVG。