如何提取SVG路径d属性的所有元素并生成完整数组？

要完整拆分SVG path的d属性为包含命令、数字、符号、分隔符的数组，需要构造能匹配所有语法单元的正则表达式，替代仅提取数字的/\d+/g。

具体实现步骤 #

• 第一步：构造匹配所有单元的正则
  使用正则表达式：/[a-zA-Z]|[-+]?\d*\.?\d+|,/g
  它能覆盖的SVG路径语法单元包括：

  • [a-zA-Z]：所有路径命令（M/m、L/l、C/c等大小写命令）
  • [-+]?\d*\.?\d+：带正负号的整数或小数（如123、-45.6、+.78）
  • ,：参数分隔符逗号

• 第二步：执行匹配获取数组
  示例代码：

  const pathElement = document.querySelector('path');
  const dValue = pathElement?.getAttribute('d');
  if (dValue) {
    const parts = dValue.match(/[a-zA-Z]|[-+]?\d*\.?\d+|,/g);
    console.log(parts);
    // 输出类似 ['M', '457', ',', '262', 'c', '-75', ...]
  }
  

适配你的示例格式（拆分符号与数字） #

如果需要将符号和数字分开（如你示例中的'c-'、'75'结构），可以调整正则来单独匹配符号：
使用正则：/[a-zA-Z]|[-+]|\d*\.?\d+|,/g
执行后会把-75拆分为'-'和'75'，结果符合你给出的示例格式：['M','457',',','262','c','-','75',...]

额外说明 #

• 若路径中用空格作为参数分隔符，且需要保留空格到数组中，可将正则修改为/[a-zA-Z]|[-+]?\d*\.?\d+|,|\s/g
• 正则已兼容大小写命令，无需额外处理相对/绝对路径的区分

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