不能直接用 background-image 塞 SVG <pattern>，因 CSS data URL 缺失 SVG 上下文导致解析失败；必须将 <pattern> 定义在外部 <svg> 中，再通过 fill="url(#id)" 由绝对定位的 <svg><rect> 覆盖单元格实现。
不能直接用 background-image 塞 SVG <pattern> —— 浏览器根本不认，背景会变空白。 真正能稳定生效的方式，是把 <pattern> 定义在表格外部的 <svg> 里，再通过 fill="url(#id)" 给 <rect> 或其他图形填充，最后把图形叠在单元格上。纯 CSS 方式走不通。
为什么 background-image: url("data:image/svg+xml,...") 无法渲染 pattern
浏览器对内联 SVG 的 background-image 解析极其严格：<pattern> 必须在 SVG 上下文中被定义和引用，而 CSS 的 data URL 是孤立字符串，不构成完整 SVG 文档环境。即使你把整个 <defs><pattern>...</pattern></defs> 编码进去，也不会被识别为可复用资源。
常见错误现象包括：
- 背景完全透明或显示默认色（不是图案失效，是压根没解析）
- 开发者工具 Network 面板里看不到任何请求，说明根本没尝试加载
- 手动把 data URL 粘到地址栏能显示图案，但塞进
background-image就失效 —— 这恰恰证明问题出在上下文缺失
可行方案：用绝对定位 <svg> 覆盖单元格
核心思路是绕过 CSS 背景机制，改用 SVG 图形作为“贴图层”覆盖在 <td> 上。这要求单元格有明确尺寸、且父容器支持定位。
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设置position: relative，确保子元素能相对它定位 - 在
<td>内部插入一个<svg>，宽高设为100%，position: absolute; top: 0; left: 0; z-index: 1 -
<svg>内部必须包含<defs>和<pattern>，ID 合法（如id="grid_8"），且patternUnits="userSpaceOnUse" - 用
<rect x="0" y="0" width="100%" height="100%" fill="url(#grid_8)">填满整个 SVG 区域 - 别忘了给
<svg>加pointer-events: none，否则会拦截鼠标事件，影响表格交互
patternUnits 和坐标单位必须匹配实际需求
填不满、错位、缩放后点距突变，90% 出在这里。关键不是“设了 userSpaceOnUse 就万事大吉”，而是所有数值单位必须统一。
-
pattern的width和height是像素值（比如width="8"），那么内部图形的cx/cy也必须落在0–8范围内，超出会被裁剪 - 如果单元格是响应式宽度（如
width: 25%），不要指望patternUnits="objectBoundingBox"自动适配 —— 它会让图案随单元格缩放，但内部<circle>的r仍按绝对值算，结果就是放大后圆变细、缩小后消失 - 真正可控的做法：保持
patternUnits="userSpaceOnUse"，用 JS 监听单元格尺寸变化，动态重设<pattern>的width/height和内部图形尺寸（例如缩放到 16px 密度时，把width="8"改成width="16"）
复杂点在于多列不同 pattern 的维护成本
每个单元格都塞一套 <svg><defs><pattern>？DOM 体积爆炸，样式难统一。更合理的做法是：
- 把所有
<pattern>集中定义在一个隐藏的全局<svg>中（比如放在<body>底部），ID 全局唯一 - 每个单元格只放一个轻量
<svg>，只含<rect>和fill="url(#xxx)"，复用外部定义 - 用 CSS class 控制 pattern 类型，比如
<td class="bg-grid-4">→ JS 查找 class 并注入对应fill="url(#grid_4)" - 避免在
<pattern>内写死颜色 —— 改用currentColor，让<td>的color或background-color控制图案色调
最易被忽略的是：pattern 不是“画一次就完事”的静态资源，它依赖上下文、单位系统和 DOM 生命周期。一旦表格内容动态增删、列宽拖拽或主题切换，所有 pattern 实例都需要同步重置尺寸和引用，否则第一眼看不出问题，放大两倍就全乱了。
