直接在表格单元格中嵌入SVG XML代码而非img标签，可使SVG成为DOM节点，支持CSS样式、JS交互及currentColor继承；需移除内联属性、设置viewBox与尺寸、调整display/vertical-align对齐，并用DOMParser安全插入动态SVG。
表格单元格里直接写<svg>标签就行
别用<img src="icon.svg">往<td>里塞——图标会变成“黑盒”，CSS改不了颜色，JS也点不到内部<path>。直接把 SVG 的 XML 代码（从<svg>到</svg>）粘进<td>里，它就和<div>一样是 DOM 节点，能加 class、设 style、绑事件。
常见错误现象：<td><img src="check.svg" class="status-icon"></td>，然后写.status-icon:hover path { fill: green }，结果毫无反应——因为<path>根本不在当前页面 DOM 中。
- 必须删掉 SVG 子元素上的
fill、stroke等内联属性，否则 CSS 无法覆盖 -
<svg>标签本身要带viewBox（如viewBox="0 0 24 24"），再配width和height属性或 CSS 尺寸，否则可能渲染为 0×0 或拉伸失真 - 推荐写法：
<td><svg class="icon" width="16" height="16" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></td>
表格里 SVG 图标对齐总出问题？关键是display和vertical-align
<svg>默认是display: inline，在<td>里会像文字一样基线对齐，底部常留白、上下偏移。这不是 bug，是 CSS 行内元素的默认行为。
解决方式很简单：给 SVG 加style="display: block; margin: 0 auto;"居中，或统一用 class 控制：
立即学习“前端免费学习笔记（深入）”；
-
.icon { display: block; margin: 0 auto; }（适合单个图标居中） -
td { vertical-align: middle; }+.icon { display: inline-block; vertical-align: middle; }（适合多图标横向对齐） - 避免用
float或position: absolute——表格单元格里容易破坏布局流
批量插入 SVG 图标时，currentColor比硬编码颜色更可靠
如果表格有多列状态图标（比如 success / warning / error），别给每个<path>写死fill="#4CAF50"——维护成本高，主题切换也麻烦。用currentColor让图标自动继承父级文本色最轻量。
实操步骤：
- SVG 子元素删掉所有
fill，只留<path d="..."> - 给
<svg>加 class，比如<svg class="status-icon status-success"> - CSS 写：
.status-success { color: #4CAF50; } .status-icon path { fill: currentColor; } - 换主题时只需改
.status-success的color，不用动 SVG 结构
注意：currentColor在 IE11 和旧安卓 WebView 中部分场景不生效，如需兼容，可 fallback 到显式 class 控制fill值。
动态生成表格时，别用innerHTML = svgString直接赋值
如果表格由 JS 动态拼接（比如从 API 拿到数据后map()生成行），直接cell.innerHTML = '<svg>...</svg>'会导致某些浏览器（尤其是 Safari）忽略命名空间，<path>不渲染或渐变失效。
正确做法是用DOMParser解析 SVG 字符串再挂载：
const parser = new DOMParser(); const doc = parser.parseFromString(svgString, "image/svg+xml"); const svgEl = doc.documentElement; cell.appendChild(svgEl);
这样能确保<svg>及其子元素在正确的命名空间下创建。如果 SVG 很简单（纯<path>无<defs>或<linearGradient>），且不支持旧系统，innerHTML也能跑通，但DOMParser是唯一稳解。
复杂点往往藏在细节里：viewBox 值是否匹配原始设计稿、子元素有没有漏删的内联样式、表格单元格是否意外设置了overflow: hidden裁掉了 SVG 边缘——这些都比“怎么插”更常导致图标消失。
