表格单元格嵌状态图应选SVG：它可内联进HTML，支持CSS样式、JS动态更新和无障碍访问；Canvas需手动管理坐标与事件，且不兼容政务系统无障碍要求。
表格单元格里直接嵌状态图，用 SVG 还是 Canvas？
直接在 <td> 里塞状态图，SVG 是唯一合理选择。Canvas 需要手动管理坐标、缩放、事件绑定，且无法被屏幕阅读器识别，在政务系统中会触发无障碍合规风险；SVG 是矢量标签，可内联进 HTML，支持 CSS 控制颜色/尺寸，也方便用 JS 动态更新节点状态。
常见错误是把整张流程图导出为 PNG 塞进 <img>：一旦审批环节增加，就得重出图、重新部署，完全违背“流程可配置”要求。
- 用
<svg>内联写法，所有节点用<g class="status-node" data-status="pending">标记 - 通过 JS 拿到当前审批节点 ID，再用
document.querySelector('[data-status="approved"]')高亮对应元素 - 避免在 SVG 里写
<style>块，统一走外部 CSS，便于主题切换（比如深色模式）
审批状态和表格行数据怎么动态绑定？
别用全局变量存状态映射关系。每个审批表格行应自带结构化元数据，比如在 <tr> 上加 data-flow-id="flow-2024-087"，再配合一个独立的 JSON 配置文件或后端接口返回该流程的状态定义：
{
"flow-2024-087": {
"stages": ["draft", "review", "legal_check", "approved"],
"current": "review",
"transitions": {
"draft": ["review"],
"review": ["legal_check", "rejected"],
"legal_check": ["approved", "rejected"]
}
}
}
渲染时，遍历 stages 数组生成 SVG 中的横向节点，再根据 current 设置对应 <circle> 的 fill 和 <text> 的字体粗细。关键点是：状态名必须和后端返回字段严格一致（大小写、下划线），否则 data-status="review" 和后端返回 "reviewing" 就对不上。
立即学习“前端免费学习笔记（深入）”；
IE11 兼容性问题怎么绕过？
政务系统仍有大量 IE11 强制要求，而 IE11 对 SVG 的 class 切换、transform 动画、foreignObject 支持极差。不要尝试 polyfill，直接降级处理：
- 检测
!!window.SVGElement，不支持则隐藏 SVG，改用纯 CSS 实现的横向进度条 + 文字标签 - CSS 进度条用
<div class="stage-bar"><span style="width: 66%"></span></div>，宽度按阶段索引计算 - 禁用所有 SVG 动画，IE11 下连
opacity渐变都会卡顿，只做 class 切换 + 背景色硬切 - 确保所有颜色值用十六进制（如
#2563eb），IE11 不认hsl()或命名色
点击状态节点跳转审批详情页，怎么传参才安全？
不能把业务 ID 拼在 URL 里用 GET 传，比如 /approve?id=12345&stage=legal_check —— 容易被篡改、日志泄露、且不符合等保三级对敏感参数的要求。
正确做法是：状态节点点击后，用 fetch 向后端发 POST 请求，携带加密的 token（由流程 ID + 当前时间戳 + 签名生成），后端校验通过再返回跳转地址或内嵌页面内容。前端只需负责触发，不暴露任何业务主键。
容易忽略的是：按钮区域必须加 aria-label="查看法律审核详情"，且禁用右键菜单（oncontextmenu="return false"），防止用户复制链接分享导致越权访问。
复杂点在于状态图要响应式缩放，但 SVG 的 viewBox 和容器宽高比稍有不匹配，文字就糊；这得靠固定字体单位（用 px，不用 em）+ JS 监听容器 resize 后重设 <svg> 的 width/height 属性，不能只靠 CSS。
