SVG的是唯一原生矢量平铺机制，必须置于中并用fill="url(#id)"引用；patternUnits="userSpaceOnUse"确保宽高为绝对像素值、缩放无损、行为可控，图块内坐标以(0,0)为原点，超出部分被裁剪。

SVG 的 标签是实现矢量背景纹理的核心机制——它不依赖图片、缩放不失真、体积极小，还能动态控制颜色、偏移和角度。关键不是“画出来”，而是“定义好再复用”。

必须放在 里，且带合法 ID

本身不渲染，只作模板。漏掉 包裹，浏览器直接忽略；ID 写错（大小写、空格、特殊字符）、引用时少写 url() 或 #，都会导致填充失效，图形显示为默认色或透明。

• 正确结构：<defs><pattern id="dots" ...><circle ...></circle></pattern></defs>
• 引用语法必须是：fill="url(#dots)"，不能是 fill="#dots" 或 fill="dots"
• ID 推荐只用小写字母、数字、下划线，例如 id="grid_2x2"

单位系统决定图案是否“听话”

默认 patternUnits="objectBoundingBox" 是最大陷阱：width/height 被解释为“被填充图形宽高的百分比”，图形一变，点距就乱。改成 patternUnits="userSpaceOnUse" 后，width/height 就是绝对像素值，行为稳定可预测。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• 设 width="12" height="12" → 每个图块就是 12×12 像素，无论矩形是 100×100 还是 800×600，平铺节奏不变
• 此时 x 和 y 也按像素解释，适合微调对齐边缘（如让第一个圆点紧贴左上角）
• 不显式声明 patternUnits，不同浏览器旧版本可能表现不一致

图块内部坐标以 (0,0) 为原点

pattern 内所有子元素（、、）的坐标，都是相对于该图块左上角计算的，不是整个 SVG 画布。超出图块范围的内容会被裁剪，看不见。

• 错误示例：<pattern width="10" height="10"><circle cx="50" cy="50" r="2"></circle></pattern> → 圆心远在图块外，什么也不显示
• 正确做法：把图形居中放，比如 <circle cx="5" cy="5" r="2"></circle>（对应 10×10 图块）
• 可嵌套多个图形：一个 画横线 + 一个 画竖线 = 方格；两个错位 = 双层波点

用 patternTransform 做整体变换

patternTransform 作用于整个图块单元，不是单个图形。它在渲染前应用，不影响内部坐标逻辑，适合批量调整风格。

• patternTransform="rotate(45)" → 让斜线纹变成 45°
• patternTransform="scale(1.2)" → 整体放大图块，点距变疏
• patternTransform="translate(3,3)" → 整体平移，常用于微调对齐
• 支持组合：patternTransform="rotate(30) scale(0.8)"