patternUnits="userSpaceOnUse"是默认安全选择，因其使width/height为绝对像素值而非被填充图形的百分比，避免图案随容器缩放而变形或疏密失常；x/y也转为绝对坐标，便于微调偏移，且需配合viewBox+preserveAspectRatio实现响应式缩放。
<pattern> 元素是 SVG 中实现可重复平铺图案填充最直接、可靠的方式，不需要外部图片，纯矢量、可缩放、体积小，且能动态控制偏移、旋转和颜色。
为什么 patternUnits="userSpaceOnUse" 是默认安全选择
不设 patternUnits 或设为 objectBoundingBox 时，width 和 height 会被解释为被填充图形宽高的百分比，导致图案随容器缩放而“变形”或“稀疏/密集”。比如一个 width="10" 在 objectBoundingBox 下实际可能是 10% 宽度，而你本意是 10px。
用 patternUnits="userSpaceOnUse" 后，width 和 height 就是绝对像素值（或用户坐标单位），行为稳定可预测。
- 必须写在
<pattern>开始标签里，不能靠 CSS 设置 - 一旦用了
userSpaceOnUse，x和y也变成绝对坐标，可用于微调起始偏移 - 若需响应式缩放（如适配不同屏幕密度），应配合
viewBox+preserveAspectRatio，而非依赖objectBoundingBox
如何定义一个基础点阵图案并复用
把点、线、网格等图形画在 <pattern> 内部，它会自动在 x/y 方向无限平铺。关键不是“画满整个区域”，而是定义好单个图形单元（tile）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
例如灰色圆点底纹：
<svg width="200" height="200">
<defs>
<pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="#999"/>
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#dots)"/>
</svg>
-
cx/cy要落在width/height范围内，否则可能被裁剪或错位 - 不要给
<pattern>加fill或stroke—— 它本身不渲染，只定义模板 - 引用时必须用
fill="url(#id)"，URL 中的#不可省略，也不能写成fill="#id"
用 patternTransform 动态调整角度或缩放
patternTransform 是对整个图形单元做几何变换，比在内部逐个改 <circle> 或 <line> 更高效，尤其适合斜线、旋转波点等场景。
例如 45° 斜线格子：
<pattern id="diagonal" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="10" height="1" fill="#ccc"/> </pattern>
-
patternTransform作用于整个 tile，不是其中某个子元素 - 多个变换用空格分隔，如
patternTransform="rotate(30) scale(0.8) translate(2,2)" - 注意旋转中心默认是 (0,0)，若要绕 tile 中心转，需先
translate(-5,-5)再rotate再translate(5,5) - 浏览器对
patternTransform支持良好，但 IE 已淘汰，无需兼容
常见错误：fill="url(#id)" 不生效的几个原因
图案没显示，大概率不是语法写错，而是引用链断裂或坐标系混乱。
-
<pattern>必须放在<defs>内，且<defs>必须在引用它的元素之前（DOM 顺序） - ID 名称大小写敏感，
fill="url(#Dots)"和id="dots"不匹配 - SVG 根元素没设
width/height，或父容器display: none/visibility: hidden，导致渲染被跳过 - 图案内部图形超出
width/height范围且未设overflow="visible"（默认裁剪） - 使用了
xlink:href引用外部 pattern 但跨域或路径错误（现代推荐内联定义，避免此问题）
真正麻烦的不是写对一次，而是当图案要适配多种尺寸、主题色或动画状态时，patternUnits、viewBox 和 CSS 变量的组合容易互相干扰。建议初始阶段全用 userSpaceOnUse + 绝对像素，稳定后再引入动态控制。
