如何在svg.js的矩形中居中显示文本？

Question

I'm trying to draw a rectangle with a text centered in it while having the elements grouped. Here my code:

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/

The result makes no sense for me.

Answer 1

I think its because you are moving the text but haven't really initially positioned it where you think. So its taking a default of 0,0 then you set anchor middle so half is off the screen, and then you moved it. However if you set its x,y first with the attr, it should work ok..

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);

updated jsfiddle here http://jsfiddle.net/Lqw7n/5/

Answer 2

instead of text.move you can use text.center like

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

i also replaced group.add with group.rect and group.text

source: https://github.com/svgdotjs/svg.js/issues/842#issuecomment-379554588