如何按指定步长从D3 SVG贝塞尔曲线上提取对应坐标点？

不需要重新计算贝塞尔曲线参数，直接调用SVG DOM原生API即可完成取点，D3仅用来做DOM选择，实现成本极低：

• 首先通过getTotalLength()获取已渲染路径的总长度
• 按指定步长遍历长度区间，通过getPointAtLength()直接获取对应位置的坐标值

完整代码示例 #

// 替换为你的path元素的选择器
const pathEl = d3.select("path.your-bezier-path").node();
// 取路径总长度
const pathTotalLen = pathEl.getTotalLength();
// 自定义步长，单位为SVG像素，可根据需求调整
const sampleStep = 8;
// 存储坐标结果的数组
const coordinateList = [];

// 遍历采样
for (let currentLen = 0; currentLen <= pathTotalLen; currentLen += sampleStep) {
  const point = pathEl.getPointAtLength(currentLen);
  // 存入x、y坐标，按需保留小数位数即可
  coordinateList.push({
    x: Number(point.x.toFixed(2)),
    y: Number(point.y.toFixed(2))
  });
}

补充说明 #

• 如果需要固定采样点数量而非固定步长，可将步长替换为 pathTotalLen / (采样点数 - 1)，即可保证首尾点都被包含在内
• 该方法拿到的坐标为SVG视口坐标系下的坐标，与你绘制贝塞尔曲线时使用的坐标体系完全一致，不需要额外做坐标转换

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