svg.js - 在 SVG 中将文本居中

Question

如何将文本居中在一个圆圈中？我的结构是这样的：<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

Answer 1

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

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

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