如何将多边形[x,y]坐标数组转换为SVG <path>的d属性？

原生JavaScript实现 #

SVG Path的d属性遵循一套简单的指令规则：

• M x y：移动到起点（Move to）
• L x y：绘制直线到指定点（Line to）
• Z：闭合路径（Close path），会自动连接最后一个点和起点

针对你的坐标数组，直接遍历拼接指令即可：

const polygon = [[52, 57], [27, 58], [34, 21], [52, 57]];

// 提取起点，生成M指令
const startPoint = polygon[0];
let pathD = `M ${startPoint[0]} ${startPoint[1]}`;

// 遍历剩余点，生成L指令
for (let i = 1; i < polygon.length; i++) {
  const [x, y] = polygon[i];
  pathD += ` L ${x} ${y}`;
}

// 添加Z指令确保路径闭合（即使数组最后一个点和起点重复，Z也能规范闭合）
pathD += ' Z';

// 最终生成的d属性内容
console.log(pathD);
// 输出："M 52 57 L 27 58 L 34 21 L 52 57 Z"

如果你的坐标数组最后一个点和起点不重复，直接加Z即可自动闭合，无需手动重复起点。

使用NPM模块实现 #

如果不想手动拼接指令，可以用现成工具库简化操作，比如svg-path-builder：

1. 安装模块：

npm install svg-path-builder

2. 代码示例：

const { pathBuilder } = require('svg-path-builder');
const polygon = [[52, 57], [27, 58], [34, 21], [52, 57]];

const builder = pathBuilder();
// 移动到起点
builder.move(polygon[0][0], polygon[0][1]);
// 依次连线到每个点
polygon.slice(1).forEach(([x, y]) => {
  builder.line(x, y);
});
// 闭合路径
builder.close();

// 获取d属性内容
const pathD = builder.toString();
console.log(pathD);
// 输出："M52 57L27 58L34 21L52 57Z"（效果和原生一致，空格可省略）

类似@svgdotjs/svg.js这类SVG操作库也能实现相同功能，核心逻辑都是基于SVG路径指令的规范化拼接。

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