path - 将标签放在 SVG 路径的 "center"中

Question

我正在尝试在 svg 文件的多边形上绘制标签。我面临的问题是大致找出这个多边形的中心来放置标签，因为路径的坐标是 svg 格式并且需要解析。有没有更简单的方法来确定 svg 多边形的中心(也许有人可以指出一个 javascript 库或一个片段)？我正在使用 Raphael javascript 库来操作 svg，但它似乎并没有超出标准的 svg 功能。

Answer 1

您可以基于 SVG DOM 方法尝试以下近似方法来执行类似于多边形建议的操作:

var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

我认为最简单的方法是使用路径元素边界框的中心(pathelm.getBBox())，这比多边形建议简单。