Javascript 如何在svg.js中将文本居中放置在矩形中？

我试图画一个以文本为中心的矩形，同时对元素进行分组。这是我的代码：

var draw = SVG('canvas')
var group = draw.group();

var rect = draw.rect(100,100).fill('#f09')
group.add(rect);

var text = draw.text('AAA');
text.font({anchor: 'middle', size: 30, family: 'Helvetica'});
text.move(50,50);

group.add(text);
group.move(100,100);

JSFiddle：

---

结果对我来说毫无意义。

我认为这是因为您正在移动文本，但最初并没有将其定位在您认为的位置。所以它的默认值是0，0，然后你设置了中间的锚点，使一半离开屏幕，然后你移动了它。但是，如果先用attr设置它的x，y，它应该可以正常工作

var group = draw.group();

var rect = draw.rect(100,100).fill('#f09')
group.add(rect);

var text = draw.text('AAA').attr({x:50, y:50 });
text.font({anchor: 'middle', size: 30, family: 'Helvetica'});
group.add(text);
group.move(100,100);

---

更新了JSFIDLE此处

而不是

text.move

您可以使用

text.center

像

var draw=SVG（“画布”）；
var group=draw.group（）；
var rect=group.rect（100100）.fill（'#f09'）；
var text=group.text（'AAA'）
.font（{size:30，family:'Helvetica'}）
.中心（0.5*垂直宽度（），0.5*垂直高度（））；
移动组（100100）；

我还将

group.add

替换为

group.rect

和

group.text

---

来源：

但它仍然没有垂直居中。我希望锚点位于文本下方，如中所述，对不起，我以为你只是指水平。我想你可能不得不玩一玩基线移动和主导基线。你的提琴中的矩形没有文字。哇，很久以前，原稿上也没有，所以其他东西看起来不对劲。如果是类似的问题，我会提出一个新问题。