javascript - How to center text in the rectangle in svg.js? - Stack Overflow

admin管理员组

文章数量:1331435

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

The result makes no sense for me.

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/Lqw7n/2/

The result makes no sense for me.

• javascript
• svg
• svg.js

Share Follow asked Nov 6, 2013 at 19:51 atokatok 5,94833 gold badges3434 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/Lqw7n/5/

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./svgdotjs/svg.js/issues/842#issuement-379554588

本文标签： javascriptHow to center text in the rectangle in svgjsStack Overflow