如何阻止SVG中两条Path路径相互连接？

问题根源 #

你遇到的新线条与上一条终点相连的情况，大概率是两个原因导致：

1. 点数组解构错误：你的点数组格式是[[x, y], [x, y], ...]（数组嵌套数组），但pointsToSVGPathString函数里用了对象解构({x, y})，这会导致解析出的坐标异常，可能间接引发路径连接问题。
2. 点数组未独立收集：每次绘制新线条时，没有清空或单独维护当前线条的点数组，导致传入的点包含了上一条线条的历史坐标，生成的路径自然会延续上一条的终点。

修复步骤 #

1. 修正坐标解构逻辑 #

把pointsToSVGPathString函数中的对象解构改为数组解构，匹配你的点数组格式：

export const pointsToSVGPathString = (points) => points
    .map(([x, y], idx) => idx ? `${x} ${y}` : `M ${x} ${y}`)
    .join(' ') 

2. 独立收集每条线条的点 #

确保每次绘制新线条时，使用独立的点数组：

• 在用户开始绘制（比如mousedown事件触发时），初始化一个空数组：const currentPoints = [];
• 绘制过程中（mousemove事件），将实时坐标[x, y]推入currentPoints
• 绘制完成（mouseup事件）时，用currentPoints调用createSvgFromPoints生成新路径，之后可清空数组或直接丢弃，为下一次绘制准备新的空数组

验证效果 #

修改后，每条新生成的path元素只会包含当前线条的坐标点，SVG会渲染独立的线段，不会出现跨线条连接的情况。

内容的提问来源于stack exchange，提问作者ThomasH.Allen