如何计算SVG Path质心以在其中心正确显示图标？

你当前通过包围盒（bbox）计算的是路径外接矩形的几何中心，对于不规则形状的路径，这个点往往不在图形实际的重心位置，导致图标偏移。用D3.js可以轻松计算路径的质心（重心），让图标精准定位在图形的视觉中心，以下是具体实现方案：

方法1：针对多边形路径（无曲线） #

如果你的path由直线段组成，可直接提取路径顶点，用d3.polygonCentroid计算质心：

// 获取目标path元素（替换为你的选择逻辑）
const pathEl = document.querySelector('path');
const svg_box = svgEl.getBBox();

// 提取路径所有绝对坐标顶点
const pathSegList = pathEl.pathSegList;
const vertices = [];
for (let i = 0; i < pathSegList.length; i++) {
  const seg = pathSegList[i];
  // 仅处理绝对移动、绝对线段指令
  if (seg.pathSegType === SVGPathSeg.PATHSEG_MOVETO_ABS || seg.pathSegType === SVGPathSeg.PATHSEG_LINETO_ABS) {
    vertices.push([seg.x, seg.y]);
  }
}

// 确保多边形闭合（原路径已闭合可省略）
if (vertices.length && !(vertices[0][0] === vertices.at(-1)[0] && vertices[0][1] === vertices.at(-1)[1])) {
  vertices.push([vertices[0][0], vertices[0][1]]);
}

// 计算质心并转换为相对svg_box的坐标
const centroid = d3.polygonCentroid(vertices);
const center = {
  x: centroid[0] - svg_box.x,
  y: centroid[1] - svg_box.y
};

方法2：支持含曲线的复杂路径 #

如果path包含贝塞尔曲线等曲线段，先将曲线近似为折线，再计算质心：

const pathEl = document.querySelector('path');
const svg_box = svgEl.getBBox();
const pathLength = pathEl.getTotalLength();
const samplePoints = [];

// 按路径长度均匀采样点，步长越小近似越精准
const step = 5;
for (let i = 0; i <= pathLength; i += step) {
  const point = pathEl.getPointAtLength(i);
  samplePoints.push([point.x, point.y]);
}

// 用采样点组成的近似多边形计算质心
const centroid = d3.polygonCentroid(samplePoints);
const center = {
  x: centroid[0] - svg_box.x,
  y: centroid[1] - svg_box.y
};

方法3：GeoJSON转换法（通用方案） #

无论路径是否含曲线，都可将SVG路径转为GeoJSON格式，用d3.geoCentroid计算质心：

const pathEl = document.querySelector('path');
const svg_box = svgEl.getBBox();
const d = pathEl.getAttribute('d');

// 转换SVG路径为GeoJSON Polygon（适配坐标系差异）
const geoJson = {
  type: 'Polygon',
  coordinates: [
    d.match(/[ML][\d\.,-]+/g)
      .map(seg => seg.slice(1).split(',').map(Number))
      .map(([x, y]) => [x, svg_box.height - y]) // 反转y轴适配GeoJSON规则
  ]
};

// 计算质心并转回SVG坐标系
const [x, y] = d3.geoCentroid(geoJson);
const center = {
  x: x - svg_box.x,
  y: (svg_box.height - y) - svg_box.y
};

注意事项 #

• 确保已引入D3.js库（你的现有代码环境已满足）
• 开放路径的质心计算可能不准确，建议所有path通过Z指令闭合
• 采样步长可根据图形精度需求调整，步长越小计算量越大

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