使用破坏图标的 xml-js 时对 SVG 元素进行排序

Question

我目前正在努力从精灵中删除未使用的 SVG。 为了完成这项任务，我使用了purged-svg 。 包 purge-svg 使用xml-js将文件转换为 SVG。 如以下几行所示。

https://github.com/Media24si/purge-svg/blob/master/src/index.js#L188 https://github.com/Media24si/purge-svg/blob/master/src/index.js#L142

问题是 SVG 中元素的顺序是有序的，这会破坏图标。

从上面的图像左侧的 SVG 是原始图像，图像右侧的 SVG 是由purge-svg编译的，因为您可以看到元素重新排序，将rect和circle带到了 SVG 的底部打破图标。

基于xml-js文档：

注意：尽管非压缩输出比压缩版本更准确地表示原始 XML，但非压缩版本比较冗长并且占用更多空间。 这个库提供了这两个选项。 如果您不确定，请使用 {compact: false}，因为它会保留所有内容； 否则使用 {compact: true} 如果你想节省空间并且你不关心混合同名元素和失去它们的顺序。

似乎基于该compact: true不保持原始顺序的文档。 但是当我更改为 compact false 时，SVG 的编译会中断。

    fs.writeFileSync(filename, js2xml(svg, { compact: false, spaces: 2 }))

添加compact: false返回一个空的icons.purged.aa00hggjh.svg文件。 如果我将其更改为compact: true我确实得到了 SVG 但重新排序会破坏图标。

 <symbol id="icon-card-cash-expenses-v2" viewBox="0 0 48 48">
    <path d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24z"/>
    <path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z" fill="currentColor"/>
    <path d="M23.5 32a7.5 7.5 0 100-15 7.5 7.5 0 000 15z" fill="currentColor"/>
    <path d="M21 27.135s1.364.865 3.273.865c1.09 0 2.727-.432 2.727-1.73 0-1.08-.936-1.56-3-2.378l-1.09-.433c-1.092-.432-1.364-1.08-1.364-1.73 0-.78.818-1.729 2.727-1.729 1.309 0 2.363.577 2.727.865" stroke="#fff" stroke-width="1.5" fill="transparent"/>
    <path d="M24 20v-2M24 30v-2" stroke="#fff" stroke-width="1.5"/>
    <rect x="10" y="15" width="28" height="18" rx="1" fill="#fff"/>
    <circle cx="24" cy="24" r="8" fill="currentColor"/>
  </symbol>

从上面的 SVG rect和circle应该在最后 2 个path元素上方，以便显示带有美元符号的图标。 但是，上面的SVG显示如下：

但假设显示为：

但是，当我尝试将设置更改为compact: false不会返回任何内容。

purge () {
    const contentIds = PurgeSvg.extractContentIds(this.options.content)

const outSvgs = {}

PurgeSvg.prepareSvgPaths(this.options.svgs).forEach(svgObj => {
    const ids = new Set([
        ...(contentIds[svgObj.filename] || []),
        ...(this.options.whitelist[svgObj.filename] || []),
        ...(this.options.whitelist['*'] || []),
    ])

    const svg = xml2js(fs.readFileSync(svgObj.in, 'utf8'), { compact: true })
    
    let symbols = svg.svg.symbol
 
    if (typeof symbols === 'undefined') {
        symbols = svg.svg.defs.symbol
    }

    if (typeof symbols === 'undefined') {
        return
    }

    if (!Array.isArray(symbols)) {
        symbols = [symbols]
    }

    if (!Array.isArray(outSvgs[svgObj.out])) {
        outSvgs[svgObj.out] = []
    }

    outSvgs[svgObj.out].push(
        ...symbols.filter((s) => ids.has(s._attributes.id)),
    )
})

for (let filename in outSvgs) {
    const svg = {
        _declaration: {
            _attributes: {
                version: '1.0',
                encoding: 'UTF-8',
            },
        },
        svg: {
            _attributes: {
                xmlns: 'http://www.w3.org/2000/svg',
                style: 'display: none;',
            },
            symbol: outSvgs[filename],
        },
    }

    if (!fs.existsSync(path.dirname(filename))) {
        fs.mkdirSync(path.dirname(filename))
    }

    fs.writeFileSync(filename, js2xml(svg, { compact: false, spaces: 2 }))
}
}

}

有什么办法可以防止在xml-js重新排序 SVG 吗？