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

我试图在svg文件的多边形上绘制标签。我面临的问题是大致找出该多边形的中心放置标签，因为路径的坐标采用svg格式，需要进行解析。有没有更容易的方法来确定一个SVG多边形的中心（也许有人可以指出一个JavaScript库或片段）？我使用Raphael JavaScript库来操作svg，但它似乎没有超越标准的svg功能。将标签放在SVG路径的“中心”

来源

2009-11-07 sol

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

祝你好运。

来源

2009-11-07 04:36:09 Randaltor

对不起，没有明确的措辞我的问题插入SVG和它里面的位置文本标签。问题更多的是如何从路径的d属性中获取坐标，这个格式为为了计算中心或找到一个JavaScript库，没有我根据svg规范解析属性。 – sol 2009-11-07 05:17:11

首先要解决的第一个问题是首先将svg转换为多边形。我一直在寻找一个代码将svg路径转换为多边形，但找不到一个。也许必须挖掘svg项目的源代码 – ivanceras 2010-07-27 11:01:45

你可以尝试做类似的多边形建议下面的内容近似，基于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（）），这比多边形建议更简单。

来源

2009-11-07 11:33:46

+11

PS：'var bbox = p.getBBox（）; var x = Math.floor（bbox.x + bbox.width/2.0）; var y = Math.floor（bbox.y + bbox.height/2.0）;'为我做了诀窍，thx。 – lwe 2011-02-17 12:00:36

谢谢@Iwe！那简单得多，我可以想象:) – Viet 2012-06-04 07:34:01

@我的评论应该是一个单独的答案。这是一个更简单，不同的方式，有不同的优点和缺点。下面是一个[** JSBIN演示，使用越南和加拿大的国家形状**]（http://jsbin.com/orAzoFI/3/edit），显示了一些关键点和区别：没有任何方法保证中心将在并且Erik的方法将中心拉向路径的更多断裂/复杂/具有更高相对周长的部分。 – user568458 2013-10-08 16:14:49

-2

通过计算宽和高

<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>

来源

2012-10-18 11:36:16

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

回答

相关问题