Canvas无法直接导出SVG，因其本质是位图而SVG是矢量；唯一可行方案是在绘制时同步记录操作并重建SVG，需提前用canvas2svg接管上下文，注意坐标系、颜色、渐变、viewBox等映射细节。
Canvas 无法直接导出 SVG，本质是位图与矢量的鸿沟
Canvas 绘制的是像素，SVG 描述的是几何指令——两者底层模型完全不同。toDataURL('image/svg+xml') 会直接报错或返回空字符串，不是你代码写错了，是浏览器根本不支持这个转换路径。
真正可行的方案只有一种：在绘制时同步记录绘图操作（如 ctx.moveTo()、ctx.lineTo()），再用这些操作生成等效的 SVG 元素。绕过 Canvas 渲染结果，回到“意图”层面重建。
- 如果你用的是
ctx.drawImage()贴图、ctx.fill()填充渐变、或任何带抗锯齿/混合模式的操作，基本无法无损转 SVG - 纯路径类操作（
beginPath()+lineTo()+stroke()）最易映射，但需手动捕获每一步 - 第三方库如
canvas2svg或canvg的 SVG 导出模块，也只是帮你做了这层“操作重录”，并非魔法
用 canvas2svg 拦截绘图命令，而不是读取画布像素
canvas2svg 不是后期处理工具，它必须在绘图前就接管 getContext('2d')，把所有调用转发成 SVG 构建逻辑。一旦你已经用原生 CanvasRenderingContext2D 画完了，它就完全无能为力。
典型错误是先画完再引入 canvas2svg，然后调 getSerializedSvg()——返回的只会是空或默认占位符。
立即学习“前端免费学习笔记（深入）”；
- 初始化必须早于任何绘图：
const ctx = new Canvas2SVG(width, height).getContext('2d') - 后续所有
ctx.lineTo()、ctx.arc()等调用，实际都在构建一个<path d="...">字符串 - 最终用
ctx.getSerializedSvg()获取完整 SVG 字符串，可直接保存为 .svg 文件或插入 DOM - 注意：不支持
ctx.clip()、ctx.setTransform()等复杂状态变更，部分滤镜和阴影也无对应 SVG 表达
手写路径映射时，注意 stroke/fill 和坐标系差异
Canvas 默认坐标原点在左上，SVG 也是，这点一致；但 Canvas 的 strokeStyle 和 fillStyle 可能是渐变、图案甚至 rgba 颜色，而 SVG 的 stroke/fill 属性只接受 CSS 颜色值或引用 <defs> 中定义的渐变 ID——不能直接拷贝 Canvas 的 CanvasGradient 对象。
- 纯色可直转：
ctx.strokeStyle = '#336699'→ SVG 中stroke="#336699" - 线性渐变需提前创建
<linearGradient id="grad1">并在 path 上写stroke="url(#grad1)" - Canvas 的
lineWidth对应 SVG 的stroke-width，但单位默认是 px，无需换算 - Canvas 的
globalAlpha没有 SVG 直接等价项，得拆成opacity（影响整个元素）或用rgba()转 fill/stroke 颜色
导出后打开 SVG 显示异常？检查 viewBox 和尺寸绑定
很多手动生成的 SVG 缺少 viewBox，导致在不同容器中缩放错乱；或者宽高设为 100% 却没配 preserveAspectRatio，内容被裁切。
最稳妥的 SVG 根节点写法是：<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">。其中 viewBox 必须与你 Canvas 初始化的宽高严格一致，否则路径坐标会偏移或压缩。
- 如果 Canvas 是响应式缩放的（比如用 CSS 设置
width: 100%），导出 SVG 时仍应按原始像素宽高设viewBox，不要用缩放后的尺寸 - SVG 中所有坐标（
moveTo、lineTo）都是绝对像素值，不需要额外缩放或 translate - 用浏览器直接打开 SVG 文件时，若显示空白，右键“查看页面源代码”，第一眼先看
viewBox是否为"0 0 0 0"或负数——这是最常见的低级但致命错误
