svg--canvasa4-listed

# 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 }, // feat