别担心，Adobe Illustrator导出的SVG路径只是紧凑版的标准SVG路径语法，本质和你熟悉的格式完全一致——只是它把能省的空格都省了，还会用小写字母表示相对坐标，看起来有点密而已。我来一步步拆解给你看，再教你怎么在Canvas里轻松绘制：

先对比你给出的两种格式，核心逻辑完全相同，只是写法更紧凑：

你熟悉的松散格式：M 0.00 0.00 L 48.98 0.00 C 37.54 10.24 ...
AI导出的紧凑格式：M563,420v97.5a7...

主要的紧凑规则有这几个：

• 省略不必要的空格：当指令字母（M/L/C等）后面直接跟数字，或者数字之间用逗号分隔时，空格可以省略。比如M 0.00 0.00等价于M0.00,0.00或M0.00 0.00。
• 小写字母代表相对坐标：AI经常用小写指令（比如v代替V，a代替A），小写指令的坐标是相对于当前路径终点的偏移量，大写则是绝对坐标。比如v97.5就是从当前点向下移动97.5个单位（如果是大写V97.5则是直接移动到Y=97.5的位置）。
• 简化数字写法：AI会去掉数字末尾冗余的零，比如420.00写成420，97.50写成97.5，数值本身没有变化。

举个具体的AI路径片段拆解：
比如M563,420v97.5a7,7 0 0,1 -7,7h-100，拆成你熟悉的格式就是：

M 563 420       // 绝对移动到坐标(563, 420)
v 97.5          // 相对垂直向下移动97.5（当前Y坐标变为420+97.5=517.5）
a 7 7 0 0 1 -7 7  // 绘制相对椭圆弧：rx=7, ry=7, 旋转角度0, 小弧段, 顺时针方向, 终点相对当前点偏移(-7,7)
h -100          // 相对水平向左移动100（当前X坐标变为563-7-100=456）

其实Canvas对标准SVG路径的兼容性很好，不管是紧凑还是松散格式都能直接处理，这里有两种常用方法：

方法1：用Path2D直接解析（最简单） #

Canvas的Path2D对象可以直接接收SVG路径字符串作为参数，不需要手动解析，直接就能绘制：

const canvas = document.getElementById('yourCanvas');
const ctx = canvas.getContext('2d');

// 把AI导出的路径字符串直接拿过来用
const aiPathStr = "M563,420v97.5a7,7 0 0,1 -7,7h-100a7,7 0 0,1 -7,-7v-97.5a7,7 0 0,1 7,-7h100a7,7 0 0,1 7,7z";

// 创建Path2D对象
const path = new Path2D(aiPathStr);

// 填充+描边路径
ctx.fillStyle = '#507834';
ctx.fill(path);
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.stroke(path);

方法2：手动解析路径（自定义处理用） #

如果你需要对路径的每个节点做自定义处理（比如修改坐标、添加动画），可以自己写个简单的解析函数拆分指令和参数：

function parseSVGPath(pathStr) {
  const commands = [];
  // 正则匹配指令字母和后续的数字组
  const regex = /([a-zA-Z])([^a-zA-Z]*)/g;
  let match;
  
  while ((match = regex.exec(pathStr)) !== null) {
    const cmd = match[1];
    // 拆分数字，过滤空字符串后转成数值
    const values = match[2].split(/[, ]+/).filter(v => v !== '').map(Number);
    commands.push({ cmd, values });
  }
  
  return commands;
}

// 使用示例
const parsedCommands = parseSVGPath("M563,420v97.5a7,7 0 0,1 -7,7");
console.log(parsedCommands);
// 输出：[{cmd: 'M', values: [563, 420]}, {cmd: 'v', values: [97.5]}, {cmd: 'a', values: [7,7,0,0,1,-7,7]}]

拿到解析后的指令数组后，你就可以循环调用Canvas的moveTo、lineTo、arcTo等方法，手动构建路径。

如果你想先把AI导出的路径转成你熟悉的松散格式，可以用Inkscape打开AI导出的SVG文件，重新导出时选择「格式化代码」选项，就能得到带空格和换行的易读路径了。

内容的提问来源于stack exchange，提问作者user3522552