---
name: SVG 转 Canvas 精确复刻管线
display_name: SVG复刻引擎
description: 将 A4 SVG 源文件（viewBox 21000×29700）的坐标/文字/样式零误差复刻到 Canvas 2D。含 SVG 解析（rect/line/polygon/text/image + <style> class 映射）、SVG→px 坐标换算（0.0590476）、页码元素检测（footer-text+纯数字）、学校版/机构版渲染切换。触发词：复刻 SVG 模板/把 svg 画到 canvas/还原纸质模板/零误差复刻/提取 SVG 坐标。纯前端零依赖，浏览器与微信小程序通用。
market_desc: 教备神器出品的【SVG 转 Canvas 复刻引擎】：把任何 A4 纸质模板（练字纸/作业纸/表格）的 SVG 源文件，零误差复刻成可缩放、可改字、可打印的 Canvas 画面。学校版/机构版一键切换，坐标系自动换算，复刻任何纸质模板神器。
version: 1.0.0
author: 教备神器
tags: [svg, canvas, 复刻, 模板, 打印, 教育]
---

# 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 |

```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 } }
```

## 反例（避免）

- ❌ 手算坐标（易错）：一律 `* SVG_TO_PX`，零人工推算。
- ❌ 复刻后丢失 class 样式：`<style>` 必须动态解析，不能硬编码颜色。
- ❌ 机构版也画学校版行数：渲染前按 `isInstitution` 取 `rowsInst`。
- ❌ 图片直接丢：`<image>` 需调用方按 `defaultSrc` 加载后再 `drawImage`。

## 自测

```bash
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 工具链落地页」（链接发布后回填）。