SVG的<pattern>是唯一原生矢量平铺机制，需置于<defs>中并用fill="url(#id)"引用；patternUnits和patternContentUnits应设为userSpaceOnUse以确保坐标单位一致、缩放无损、行为可控。
<pattern> 元素是 SVG 中唯一原生支持矢量平铺填充的机制，不依赖图片、不模糊、缩放无损，但必须注意 patternUnits 和坐标单位的匹配，否则图案会错位、缩放异常或完全不可见。
pattern 必须放在 <defs> 里且通过 fill="url(#id)" 引用
直接写在 <svg> 根下或未包裹在 <defs> 中的 <pattern> 不会被识别；引用时漏掉 url() 或 ID 写错（比如大小写、拼写、未加 #），都会导致填充失效，图形显示为默认黑色或透明。
-
<defs>是声明区，所有<pattern>、<linearGradient>等需复用资源都应放在这里 - 引用必须用完整语法：
fill="url(#dots)"，不是fill="#dots"，也不是fill="dots" - ID 值区分大小写，且不能含空格或特殊字符（推荐只用字母、数字、下划线）
patternUnits="userSpaceOnUse" 是最可控的单位模式
默认 patternUnits="objectBoundingBox" 会让 width 和 height 解释为“被填充图形宽高的百分比”，例如 width="0.1" 表示图形单元宽度 = 填充目标宽度的 10% —— 这在响应式容器中极易导致图案忽大忽小、错行。改成 userSpaceOnUse 后，width/height 就是绝对像素值，和 SVG 画布坐标系一致，行为可预测。
- 设
width="12" height="12"就是 12×12 像素一个单元，无论<rect>多大，平铺节奏不变 - 若同时设置
x和y，它们也按相同单位解释（即从画布原点偏移） - 不设
patternUnits时不要假设它是userSpaceOnUse，不同浏览器旧版本可能有兼容差异
用 <circle>、<line>、<rect> 组合构建常见底纹
单个 <pattern> 内可嵌套任意 SVG 图形，无需外部资源。关键在于控制单元尺寸与图形位置对齐，避免留白或重叠。
立即学习“前端免费学习笔记（深入）”；
- 波点：用
<circle cx="6" cy="6" r="2" fill="#666">放在 12×12 单元中心，确保边缘不切圆 - 45°斜线：用
<line x1="0" y1="12" x2="12" y2="0" stroke="#ccc" stroke-width="1">，起点终点刚好撑满单元对角 - 方格网：两个
<rect>，一个y="0" height="1"（横线），一个x="0" width="1"（竖线） - 错位双层波点：叠加两个
<circle>，半径/颜色不同，第二个cx="8" cy="8"模拟阴影偏移
patternTransform 可动态旋转、缩放、平移整个图案
patternTransform 是作用于整个图案单元的变换，不是内部图形的变换。它在渲染前应用，不影响坐标计算逻辑，适合做整体风格切换（如斜线角度调整、统一缩放）。
-
patternTransform="rotate(45)"让所有单元绕自身左上角旋转 45°，常用于斜纹 -
patternTransform="scale(0.5) translate(10, 10)"先缩小再偏移，注意顺序影响结果 - 慎用
translate大数值：可能把图案整体移出可见区域，调试时可临时加stroke="red"边框看单元边界 - 该属性不支持 CSS 动画，如需交互动态，得用 JS 替换
patternTransform属性值
真正容易被忽略的是 patternContentUnits —— 它控制图案内部图形坐标的解释方式。绝大多数场景下应显式设为 userSpaceOnUse，否则当 <pattern> 被用在不同尺寸的图形上时，内部 <circle cx="5"> 的含义可能变成“父元素宽度的 5%”，而不是“5 像素”。这个细节不出错时不显眼，一出错就难定位。
