将标签放在SVG路径的"中心"

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())的中心,这比多边形建议更简单.

Answer 2

您可以尝试做的最简单的事情是通过取多边形中所有点的平均值来计算中心。它应该适用于除最不规则的多边形之外的所有多边形。我在我的程序中使用了相同的算法，效果良好。

祝你好运。