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

【问题标题】：How to center text in the rectangle in svg.js?如何在 svg.js 的矩形中居中文本？
【发布时间】：2013-11-06 19:51:35
【问题描述】：

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

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/

结果对我来说毫无意义。

【问题讨论】：

标签： javascript svg svg.js

【解决方案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/

【讨论】：

但它仍然没有垂直居中。我希望锚点位于 developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor 中所述的文本下方
抱歉，我以为你的意思是水平的。我怀疑你可能不得不玩一下基线移位和主导基线
你的小提琴的矩形中没有文字
哇是很久以前的事了，原版也没有，所以看起来有些不对劲。如果是类似的问题，我会发布一个新问题。

【解决方案2】：

你可以用text.center代替text.move

<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

【讨论】：