在Node.js中如何读取SVG文件内的全部path路径字符串

核心问题说明 #

现有代码存在两个错误点：

1. fs.readFile 是异步API，在回调函数外执行DOM查询时，SVG文件还未完成读取，cheerio实例未完成初始化，属于时序逻辑错误。
2. cheerio的attr()方法默认仅返回第一个匹配元素的属性值，要获取全部匹配元素的属性需要遍历节点。

可行实现代码 #

回调版本 #

const fs = require('fs')
const path = require('path')
const cheerio = require('cheerio')

// 用path.join拼接路径，兼容多系统路径规则
const path_to_svg = path.join(__dirname, 'documents', 'potpis.svg')

fs.readFile(path_to_svg, 'utf8', (err, data) => {
  if (err) return console.error('SVG文件读取失败：', err)
  const $ = cheerio.load(data, { xmlMode: true })
  // 遍历所有path节点提取d属性
  const allPathD = $('path').map((index, element) => {
    return $(element).attr('d')
  }).get().filter(Boolean) // get()转为普通数组，filter过滤空值

  // 输出结果
  console.log('所有path的d属性数组：', allPathD)
  // 如果需要合并为单条路径字符串
  const mergedPath = allPathD.join(' ')
  console.log('合并后完整路径：', mergedPath)

  // 后续业务逻辑在这里执行
})

同步版本（适合简单场景，避免回调嵌套） #

const fs = require('fs')
const path = require('path')
const cheerio = require('cheerio')

const path_to_svg = path.join(__dirname, 'documents', 'potpis.svg')

try {
  const svgContent = fs.readFileSync(path_to_svg, 'utf8')
  const $ = cheerio.load(svgContent, { xmlMode: true })
  const allPathD = $('path').map((i, el) => $(el).attr('d')).get().filter(Boolean)
  // 后续业务逻辑
} catch (err) {
  console.error('SVG处理失败：', err)
}

补充说明 #

• 如果你需要保留每个path的独立属性，直接使用allPathD数组即可；如果需要合并为单条SVG路径，直接用空格拼接数组元素即可符合SVG语法规范。
• 加入filter(Boolean)是为了过滤掉部分异常无d属性的path节点，避免后续业务逻辑报错。

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