SVG 条纹图案生成器
创建自定义矢量条纹图案:颜色、粗细和角度均可调节。可下载 SVG 文件,也可直接复制代码嵌入您的网站。100% 在本地生成,不会向服务器发送任何内容。
工作原理
用作横幅背景、区块背景或插图的条纹图案,需要在各种屏幕尺寸下都保持清晰。以 SVG 而非 PNG 生成,图案始终是矢量的:无论放大还是重复平铺,都不会模糊或出现像素化。设置两种颜色、条纹粗细和角度,即可获得可直接使用的文件。
如何把这个图案用作 CSS 背景?
下载 SVG 文件后,通过 background-image: url('motif-rayures.svg') 将其设为背景;如果想避免额外的 HTTP 请求,也可以复制 SVG 代码并编码为 data URI。
图案会在大面积区域上自动重复吗?
会:条纹由原生 SVG 的 <pattern> 元素生成,会在整个定义区域内以图块形式重复,与所选矩形的大小无关。因此您也可以生成一个小图案,再按需配合 CSS 的 background-repeat 使用。
隐私:SVG 完全在您的浏览器中构建,任何数据和设置都不会发送到服务器。