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

Posted 2023-02-23

【中文标题】将标签放在 SVG 路径的“中心”

【英文标题】：Put label in the "center" of an SVG path

【发布时间】：2010-12-14 02:20:41

【问题描述】：

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

【参考方案1】：

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

祝你好运。

【讨论】：

抱歉，我的问题没有明确表述。问题更多是关于如何从路径的 d 属性中获取坐标，该属性采用这种格式 为了计算中心或找到一个 javascript 库，无需我根据 svg 规范解析属性。

首先要解决的第一个问题是先将svg转换成多边形。我一直在寻找将 svg 路径转换为多边形的代码，但找不到。可能需要深入挖掘 svg 项目的源代码

【参考方案2】：

您可以根据 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()），这比多边形建议更简单。

【讨论】：

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); 帮了我大忙，谢谢。

谢谢@Iwe！这比我想象的要简单得多:)

@Iwe 的评论值得单独回答。这是一种更简单、不同的方法，具有不同的优点和缺点。这是一个JSBIN demo of both using Vietnam and Canada country shapes，显示了一些关键点和差异：这两种方法都不能保证中心位于形状内，并且 Erik 的方法将中心拉向更断裂/更复杂/具有更高相对周长的路径部分。

@user568458 阅读了我回答的最后一句话，我确实建议了 getBBox 方法，尽管我确实省略了如何计算 bbox 矩形的中心，因为我认为它是如此微不足道。确实没有一种方法可以保证计算出的中心在形状内。

【参考方案3】：

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

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