在 SVG 中将文本居中答案

【问题标题】：Centering a text in SVG在 SVG 中将文本居中
【发布时间】：2019-10-18 15:12:00
【问题描述】：

如何使文本在一个圆圈中居中？我的结构是这样的：<g><circle ...</><text ...>...</text></g>

我已经知道这种技术：<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"><g><circle cx="50%" cy="50%" r="50%"/><text x="50%" y="50%" text-anchor="middle" dy="0.3em"></text></g></svg>但这在 svg.js 中不可用。

我用bbox试过了，但是文字不是真的居中。

有更好的想法吗？

编辑：

这是我的代码：

let dot = draw.group();

let _dot = dot.circle(20).move(pos._x-10, pos._y-10);

let lab = dot.plain(i.toString());

let bA = _dot.bbox();
let bB = lab.bbox();

lab.move(bA.x+(bA.width-bB.width)/2,
    bA.y+(bA.height-bB.height)/2);

结果是这样的：https://i.ibb.co/FWbvbF2/dot.png

【问题讨论】：

我没有看到任何 svg.js 代码。到目前为止，您尝试过什么？
我添加了我的代码。

标签： svg.js

【解决方案1】：

有一种通过中心定位形状的 center 方法：

circle.center(20, 20)
text.center(20, 20)

但是，您也可以将您的方法与 svg.js 一起使用。只需使用attr() 设置您需要的属性

【讨论】：