使用svgson与svg-path-to-polygons解析SVG路径遇语法错误如何解决？

错误原因 #

你的SVG路径d属性中包含HTML实体
（代表换行符），而svg-path-to-polygons的解析器仅支持SVG规范定义的路径语法，无法识别这种HTML转义字符，因此抛出了包含"&"的语法错误。这个实体是svgson解析SVG时，将原始SVG中的换行符转义生成的。

解决方案 #

在调用svg-path-to-polygons解析前，先对d属性字符串进行HTML实体解码，将
转换为原始的换行符（或直接替换为空格，SVG路径中空格和换行都是合法的分隔符）。

方法1：手动替换实体 #

直接用字符串替换处理d属性：

// 获取path元素的d属性
const rawD = pathElement.attributes.d;
// 将
替换为换行符（或空格' '）
const cleanedD = rawD.replace(/
/g, '\n');

// 现在解析处理后的路径
const polygons = svgPathToPolygons(cleanedD, { tolerance: 1 });

方法2：使用HTML实体解码库 #

如果你的SVG中还有其他HTML实体（比如&等），可以使用专门的解码库（如he）处理：

const he = require('he');

const rawD = pathElement.attributes.d;
const cleanedD = he.decode(rawD);

const polygons = svgPathToPolygons(cleanedD, { tolerance: 1 });

验证步骤 #

1. 复制你的d属性字符串，手动将所有
替换为换行或空格。
2. 用处理后的字符串调用svg-path-to-polygons，确认解析正常。

这样就能解决语法错误，成功解析路径生成多边形。

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