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

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

祝你好运。

Answer 3

在svg中插入一个文本标签，并通过计算宽度和高度

来定位它

 <svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ............
    ............

   <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" >
        Text To Show
   </text>
</svg>

将标签放在SVG路径的“中心”

3 个答案: