Как центрировать текст в прямоугольнике в 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, затем вы устанавливаете середину привязки, чтобы половина была вне экрана, а затем вы переместили ее. Однако если вы сначала установите его x,y с помощью attr, он должен работать нормально.

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.center нравиться

<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