如何获取SVG路径的坐标点列表，且支持自定义点的采样密度？

核心实现原理 #

直接复用浏览器原生SVG API，无需手动解析路径命令，支持所有标准路径类型（M/L/A/C/Q/Z等），兼容所有现代浏览器。

• path.getTotalLength()：获取路径总长度（单位和viewBox一致）
• path.getPointAtLength(长度值)：获取指定长度位置的(x,y)坐标值

浏览器端实现 #

支持两种采样控制方式：固定采样点数、按密度步长采样

示例代码 #

<!-- 你的SVG代码 -->
<svg id="targetSvg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="targetPath" fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

<script>
/**
 * 从SVG Path获取坐标点列表
 * @param {SVGPathElement} pathEl - 目标path元素
 * @param {Object} options - 采样配置
 * @param {number} [options.pointCount] - 固定采样点数（和step二选一）
 * @param {number} [options.step] - 采样步长，单位和viewBox一致（值越小密度越高）
 * @returns {Array<{x:number, y:number}>} 坐标点列表
 */
function getPathPoints(pathEl, options = {}) {
  const totalLength = pathEl.getTotalLength();
  const points = [];
  
  // 优先按固定点数采样
  if (options.pointCount) {
    const stepLength = totalLength / (options.pointCount - 1);
    for (let i = 0; i < options.pointCount; i++) {
      const point = pathEl.getPointAtLength(i * stepLength);
      points.push({x: point.x, y: point.y});
    }
    return points;
  }
  
  // 按步长采样
  if (options.step) {
    for (let len = 0; len <= totalLength; len += options.step) {
      const point = pathEl.getPointAtLength(len);
      points.push({x: point.x, y: point.y});
    }
    // 补全路径终点
    const endPoint = pathEl.getPointAtLength(totalLength);
    if (points.at(-1).x !== endPoint.x || points.at(-1).y !== endPoint.y) {
      points.push({x: endPoint.x, y: endPoint.y});
    }
    return points;
  }
  
  // 默认采样100个点
  return getPathPoints(pathEl, {pointCount: 100});
}

// 使用示例
const path = document.getElementById('targetPath');
// 方式1：固定采样50个点
const pointsByCount = getPathPoints(path, {pointCount: 50});
// 方式2：每2个单位长度采样1个点
const pointsByDensity = getPathPoints(path, {step: 2});

console.log('坐标点列表：', pointsByCount);
</script>

Node.js 离线实现 #

如果需要在服务端无浏览器环境运行，可以用jsdom模拟DOM环境实现，步骤如下：

1. 先安装依赖：npm install jsdom
2. 示例代码：

const { JSDOM } = require('jsdom');

async function getPathPointsNode(pathD, svgViewBox, options = {}) {
  const dom = new JSDOM(`
    <svg viewBox="${svgViewBox}" xmlns="http://www.w3.org/2000/svg">
      <path d="${pathD}" />
    </svg>
  `, { runScripts: 'dangerously' });
  const pathEl = dom.window.document.querySelector('path');
  
  // 复用和浏览器端一致的采样逻辑
  const totalLength = pathEl.getTotalLength();
  const points = [];
  
  if (options.pointCount) {
    const stepLength = totalLength / (options.pointCount - 1);
    for (let i = 0; i < options.pointCount; i++) {
      const point = pathEl.getPointAtLength(i * stepLength);
      points.push({x: point.x, y: point.y});
    }
    return points;
  }
  
  if (options.step) {
    for (let len = 0; len <= totalLength; len += options.step) {
      const point = pathEl.getPointAtLength(len);
      points.push({x: point.x, y: point.y});
    }
    const endPoint = pathEl.getPointAtLength(totalLength);
    if (points.at(-1).x !== endPoint.x || points.at(-1).y !== endPoint.y) {
      points.push({x: endPoint.x, y: endPoint.y});
    }
    return points;
  }
  
  return getPathPointsNode(pathD, svgViewBox, {pointCount: 100});
}

// 使用示例
const pathD = `M 10,30
  A 20,20 0,0,1 50,30
  A 20,20 0,0,1 90,30
  Q 90,60 50,90
  Q 10,60 10,30 z`;
getPathPointsNode(pathD, '0 0 100 100', {pointCount: 50}).then(points => {
  console.log('服务端采样结果：', points);
});

注意事项 #

• 输出的坐标默认是SVG viewBox坐标系下的数值，如果需要转换为实际渲染的屏幕像素，需要乘以SVG实际渲染宽度和viewBox宽度的比值（高度同理，等比缩放的话两个比值一致）
• 如果path元素设置了transform属性，可以用pathEl.getCTM()矩阵对采样得到的坐标做变换，得到变换后的实际坐标

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