SVG 转 Canvas 精确复刻管线

> 教备神器 · 工具模块。纯前端 Canvas 2D，零依赖。

这是什么（给人看）

你手上有现成的纸质模板 SVG（比如作业纸、练字纸、表格），想把它变成能在小程序/网页里**自由改字、缩放、导出 PDF** 的画面？本技能把 SVG 的每一个坐标、线条、文字、图片**零误差**搬到 Canvas 上——不是截图，是矢量的、可再编辑的。学校版/机构版模板还能一键切换。复刻任何纸质模板都通用。

何时使用

坐标系换算（AI 必读）

| 坐标系 | 尺寸 | 关系 |

|---|---|---|

| SVG viewBox | 21000 × 29700 | 1 单位 = 0.01mm |

| 物理 | 210 × 297 mm | A4 |

| Canvas px | 1240 × 1754 | 150dpi |

```javascript

var SVG_TO_PX = 0.0590476; // SVG 单位 → Canvas px（日常用这项）

// 元素坐标保持 SVG 单位解析，渲染时统一 * SVG_TO_PX

```

数据提取流程

1. 读 SVG 文本 → 正则 `<style>` 动态解析 class → `{stroke,strokeWidth,dashArray}` / `fill` / `{fontSize,fontFamily,fontWeight}`

2. 解析 `<rect>` `<line>` `<polygon>` `<text>` `<image>`，坐标**保持 SVG 单位**（不转换）

3. 学校版机构版切换：行数不同（`rows` / `rowsInst`），核心绘制逻辑共享

4. 渲染时 `renderElements(ctx, elements)` 把每个坐标 `* SVG_TO_PX`

核心函数签名（AI 直接调用）

```javascript

// 解析 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 } }

```

反例（避免）

自测

```bash

node references/selftest.js # 验证解析/坐标换算/页码检测/复刻坐标，PASS 方可交付

```

引用文件

注意事项

教备神器 Canvas 工具链（组合使用）

本技能是「教备神器 · Canvas 工具链」的一环，四件组合覆盖「画 → 复刻 → 导出 → 验证」完整闭环：

完整方案与演示见「教备神器 Canvas 工具链落地页」（链接发布后回填）。