SVG 转 Canvas 精确复刻管线
教备神器 · 工具模块。纯前端 Canvas 2D，零依赖。
这是什么（给人看）
你手上有现成的纸质模板 SVG（比如作业纸、练字纸、表格），想把它变成能在小程序/网页里自由改字、缩放、导出 PDF 的画面？本技能把 SVG 的每一个坐标、线条、文字、图片零误差搬到 Canvas 上——不是截图，是矢量的、可再编辑的。学校版/机构版模板还能一键切换。复刻任何纸质模板都通用。
- 已附
selftest.js：用桩 ctx 验证"坐标真的被换算对"，PASS 才算靠谱。
何时使用
- "把这个 SVG 模板复刻成 Canvas" / "把 svg 画到 canvas 上"
- 需要精准还原某个纸质模板（坐标系、线型、字号一致）
- 模板有学校版/机构版两种样式要切换
坐标系换算（AI 必读）
| 坐标系 | 尺寸 | 关系 |
|---|---|---|
| SVG viewBox | 21000 × 29700 | 1 单位 = 0.01mm |
| 物理 | 210 × 297 mm | A4 |
| Canvas px | 1240 × 1754 | 150dpi |
var SVG_TO_PX = 0.0590476; // SVG 单位 → Canvas px（日常用这项）
// 元素坐标保持 SVG 单位解析，渲染时统一 * SVG_TO_PX
数据提取流程
- 读 SVG 文本 → 正则
<style>动态解析 class →{stroke,strokeWidth,dashArray}/fill/{fontSize,fontFamily,fontWeight} - 解析
<rect><line><polygon><text><image>，坐标保持 SVG 单位（不转换） - 学校版机构版切换：行数不同（
rows/rowsInst），核心绘制逻辑共享 - 渲染时
renderElements(ctx, elements)把每个坐标* SVG_TO_PX
核心函数签名（AI 直接调用）
// 解析 SVG 文本 → { source, totalElements, elements:[{type,x,y,w,h,stroke,fill,classes,...}] }
SvgToElements.parseSVG(svgText, sourceName, imgBase)
// 复刻渲染：自动 *SVG_TO_PX；image 需调用方提供 drawImage 加载逻辑
Replica.renderElements(ctx, elements, { scale?, drawImage? })
// 页码元素识别：classes 含 'footer-text' 且 text 为纯数字 → 返回该元素（供 drawAll 替换为页码）
Replica.detectPageNo(elements) // -> element | null
// 模板配置 JSON 结构（源自 SVG 实测）
// { name, grid:{ cellW, cellH, cols, rows, rowsInst, startX, startY },
// features:{ errorRow, pinyin, correctionCol },
// branding:{ logo:{x,y,w,h}, qr:{x,y,w,h}, slogan } }
反例（避免）
- ❌ 手算坐标（易错）：一律
* SVG_TO_PX，零人工推算。 - ❌ 复刻后丢失 class 样式：
<style>必须动态解析，不能硬编码颜色。 - ❌ 机构版也画学校版行数：渲染前按
isInstitution取rowsInst。 - ❌ 图片直接丢：
<image>需调用方按defaultSrc加载后再drawImage。
自测
node references/selftest.js # 验证解析/坐标换算/页码检测/复刻坐标，PASS 方可交付
引用文件
references/svg-to-elements.js— SVG 解析模块（UMD）references/replica.js— Canvas 复刻渲染 + 页码检测（UMD）references/selftest.js— Node 自测（桩 ctx 验证坐标换算）
注意事项
- 元素坐标为 SVG 单位，渲染统一缩放；Canvas 内部尺寸固定 1240×1754。
- 与
canvas-grid-engine（负责"画"新网格）互补：本技能负责"复刻"已有模板。
教备神器 Canvas 工具链（组合使用）
本技能是「教备神器 · Canvas 工具链」的一环，四件组合覆盖「画 → 复刻 → 导出 → 验证」完整闭环：
- Canvas 学习纸网格引擎（画）：13 种教育网格 + 汉字居中 + 拼音标注，生成米字格/田字格字帖。
- SVG 转 Canvas 复刻引擎（复刻）：把现有纸质模板 SVG 零误差复刻成可改字、可打印的 Canvas。
- Canvas 多页 PDF 导出（导出）：多页 Canvas 一键合成标准 A4 PDF 直接打印。
- 小程序 Canvas 验证工作流（验证）：本地预览 + 截图视觉回归，杜绝格子歪、字偏。
完整方案与演示见「教备神器 Canvas 工具链落地页」（链接发布后回填）。