Node.js中使用cheerio提取SVG多path元素d属性并合并的问题

你原有代码的问题出在两处：

• 遍历目标错误：所有<path>节点都嵌套在<g>标签下，直接遍历<svg>的直接子元素只会拿到<g>节点，拿不到内部的<path>节点
• 属性读取逻辑错误：循环内每次都调用$('path').attr('d')，cheerio中对包含多个元素的选择集调用attr()方法，只会返回第一个匹配元素的对应属性值，所以每次输出的都是第一个路径的d值

修正后的可实现需求的代码如下：

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

fs.readFile(path_to_svg, 'utf8', (err, data) => {
  if (err) return console.log(err)
  const $ = cheerio.load(data, { xmlMode: true })
  const pathDArr = []
  // 直接选中所有path节点遍历
  $('path').each(function (index, element) {
    // 读取当前遍历到的path节点的d属性存入数组
    pathDArr.push($(element).attr('d'))
  })
  // 拼接为完整的路径字符串
  const combinedPathD = pathDArr.join(' ')
  console.log(combinedPathD)
})

额外提示：如果后续要把合并后的路径生成新SVG使用，需要注意继承原有<g>标签上的transform、fill等属性，避免出现样式、位置渲染错位的问题。

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