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.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#issuecomment-379554588

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

2 个答案: