path转为坐标

获取path上的坐标点

思路：

获取路径的长度path.getTotalLength()，将长度平均分成N段，每一段切点坐标是多少；

步骤：

1，准备一个路径

var pathData = 'M10,10C20,20,30,10,40,20S50,30,60,20Q70,10,80,20T90,30'

2，创建一个path，

var path = document.createElementNS("http://www.w3.org/2000/svg", "path")

3，将pathData赋值给属性

path.setAttribute("d", pathData);

4，获取路径长度

var pathLen = path.getTotalLength()

5、将路径平均分成N段

var numPoints = 100

// 如路径长度pathLen的100分之5段的分隔点

var i = 5
pathLen * (i/numPoints)或者（pathLen*i）/numPoints

6，求某一分隔点坐标

var i = 5
var numPoints = 100
path.getPointAtLength((i * pathLen) / numPoints)

完整举例

function pathToPoints (pathData, numPoints) {
	if (!pathData) return []
	  
	// 创建一个Path元素  
	var path = document.createElementNS("http://www.w3.org/2000/svg", "path");  
	path.setAttribute("d", pathData);

	var pathLen = path.getTotalLength()
	var points = []
// numPoints可以作为缺省值，取长度的30%个分隔点，即，取多少个坐标
	if (!numPoints) {
		numPoints = parseInt(pathLen * 0.3) || 4
		numPoints = numPoints > 500 ? 500 : numPoints
	}
// 循环求出每一段分隔点的坐标
	for (let i = 0; i < numPoints; i++) {
		let p = path.getPointAtLength((i * pathLen) / numPoints);
        points.push(p)
	}
			
	return points;  
}

//举例调用:

var pathData = 'M10,10C20,20,30,10,40,20S50,30,60,20Q70,10,80,20T90,30'
var numPoints = 100 // 平均分隔成多少段，求每个分隔点坐标，即，取多少个坐标

输出：