javascript - 如何在 svg.js 的矩形中居中文本？

Question

我正在尝试绘制一个以文本为中心的矩形，同时将元素分组。这是我的代码：

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：http: //jsfiddle.net/Lqw7n/2/

结果对我来说毫无意义。

Answer 1

我认为这是因为您正在移动文本，但最初并没有真正将其定位在您认为的位置。因此，它采用默认值 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);

在这里更新了 jsfiddle http://jsfiddle.net/Lqw7n/5/

Answer 2

而不是text.move你可以使用text.centerlike

<div id="canvas"></div>
<script type="text/javascript" src="svg.min.js"></script>
<script type="text/javascript">
var draw = SVG('canvas');

var group = draw.group();

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

var text = group.text('AAA')
.font({size: 30, family: 'Helvetica'})
.center(0.5*rect.width(), 0.5*rect.height());

group.move(100, 100);

</script>

我也替换group.add为group.rect和group.text

来源：https ://github.com/svgdotjs/svg.js/issues/842#issuecomment-379554588