技能介绍

要解决的问题

当你拿到一份纸质模板的 SVG（比如作业纸、练字纸、表格），想把它搬到线上的 Canvas 上时，常遇到三类麻烦：一是坐标换算出错——SVG 的 viewBox 用的是毫米级单位（1 单位 = 0.01mm），直接映射到 Canvas 的像素坐标会出现线条偏移、文字错位；二是样式丢失——如果硬编码颜色、线宽、字号，后续想调整模板风格就得改代码，效率极低；三是无法复用——截图式的转换只能看不能用，没法实现改字、缩放、导出 PDF 等动态需求。更麻烦的是，很多模板有学校版/机构版两种样式，切换时还要重新处理行数差异。

核心工作机制

这个技能的思路是「解析→保持→缩放→渲染」四步走：

动态解析样式：读取 SVG 文本后，用正则提取 class 中的 stroke（线色）、strokeWidth（线宽）、dashArray（虚线）、fill（填充）和文字的 fontSize/fontFamily/fontWeight，不会硬编码样式；
保持原始坐标：解析 <path>、<text> 等元素时，坐标不提前转换，直接用 SVG 原生单位；
共享核心逻辑：学校版（rows）和机构版（rowsInst）的差异只在行数，核心绘制逻辑完全共享，渲染前按 isInstitution 参数选行数即可；
统一缩放渲染：最终调用 renderElements(ctx, elements) 时，每个坐标乘以 SVG_TO_PX（1240×1754 Canvas 对应 210×297mm A4），把 SVG 单位转成像素。

已附 selftest.js：用桩 ctx 验证坐标换算是否正确，只有 PASS 才能保证「画出来的线和原模板重合」。

适用边界与注意点

Canvas 内部尺寸固定为 1240×1754（150dpi A4），不要手动修改，否则坐标换算会失效；
图片元素不会自动加载：需调用方先按 defaultSrc 加载图片，再通过 drawImage 绘制，否则会出现空白；
它是「Canvas 工具链」的复刻环节，与「网格引擎」（画新网格）互补——前者负责把已有模板搬到 Canvas，后者负责生成新的教育网格，不要混淆职责。