SVG 图案生成器
SVG图案生成工具
关于 SVG 图案生成器
SVG 图案生成器通过定义一个填充了单一重复形状的 SVG <pattern> 元素来创建可重复平铺的背景。它提供六种形状类型（圆形、正方形、三角形、线条、十字、菱形），以轮廓形式绘制，然后在 200x200 预览中平铺，并导出完整的 SVG 标记，可用于网页、CSS 背景或设计文件。
使用方法
1. 从六个按钮选项中选择图案类型。 2. 调整大小滑块（10 到 60px），同时设置拼贴尺寸和形状比例。 3. 调整描边宽度滑块（0.5 到 6.0）。 4. 使用旋转（0 到 360 度，每次 5 度）通过 patternTransform 旋转拼贴。 5. 使用两个色块设置形状颜色和背景颜色。 6. 点击复制将生成的 SVG 复制到剪贴板。
图案输出格式
导出的 SVG 为 200x200，包含一个使用 patternUnits="userSpaceOnUse" 的 <defs><pattern> 块。图案的宽度和高度等于大小值，因此每个拼贴在该尺寸的网格上重复。先绘制用背景颜色填充的背景 <rect>，然后用填充为 url(#pat) 的第二个 <rect> 覆盖拼贴。当旋转不为零时，旋转既作为图案上的 patternTransform 应用，也作为形状本身的 rotate() 变换应用。
▶形状是填充的还是轮廓的？
是轮廓的。每个形状都使用 fill="none" 生成，并使用描边宽度和形状颜色作为其轮廓，因此背景会透过内部显示。
▶为什么画布只有 200x200？
预览和导出的 SVG 固定为 200x200 像素。由于输出使用平铺图案，您可以在 CSS 中将其放大，或从另一个 SVG 引用图案元素来填充任何区域。
▶旋转实际上旋转了什么？
它在图案元素上同时应用 patternTransform="rotate(N)"，并在内部形状上应用 rotate(N size/2 size/2) 变换，因此每个单独的图案在其拼贴内旋转，整个平铺也随之旋转。
▶我的数据会被发送到服务器吗？
不会。所有处理都在您的浏览器本地进行。您的输入永远不会离开您的设备。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。