Html Raphael js文本定位：将文本居中于一个圆圈中

我用拉斐尔js画圆圈数字。问题是每个数字都有不同的宽度/高度，因此使用一组坐标来居中文本是行不通的。IE、FF和safari之间的文本显示方式不同。是否有一种动态方法可以找到数字的高度/宽度并相应地将其居中

这是我的测试页面：

我的代码是：

function drawcircle(div, text) { 
    var paper = Raphael(div, 26, 26); //<<
    var circle = paper.circle(13, 13, 10.5);
    circle.attr("stroke", "#f1f1f1");
    circle.attr("stroke-width", 2);
    var text = paper.text(12, 13, text); //<<
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text.attr("fill", "#f1f1f1");
}

window.onload = function () {
    drawcircle("c1", "1");
    drawcircle("c2", "2");
    drawcircle("c3", "3");
};

函数drawcircle（div，text）{
var paper=Raphael（div，26，26）；//可能是这样的：

var paper = Raphael(div, 26, 26); //<<
var circle = paper.circle(13, 13, 10.5);
circle.attr("stroke", "#f1f1f1");
circle.attr("stroke-width", 2);
var text = paper.text(0, 0, text); //<<
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text.attr("fill", "#f1f1f1");
text.translate((35 - text.getBBox().width)/2, (45 - text.getBBox().height)/2);

var paper=Raphael（div，26，26）；//示例（列在页面的右栏中，或）讨论了将文本放置在精确的位置，以及像往常一样，使IE工作所需的额外步骤

它确实为文本找到了一个边界框；我认为按照Jan的建议将文本移动边界框的一半是很简单的。
（答案重写）：默认情况下，Raphael.js将文本节点水平和垂直居中

这里的“居中”意味着paper.text（）方法的x，y参数需要文本边界框的中心

因此，只需指定与圆相同的x，y值，即可产生所需的结果：

var circle = paper.circle(13, 13, 10.5);
var text = paper.text(13, 13, "10");


（）

相关源代码：




使用此属性：
'text-anchor'：'start'
：

paper.text( x, y, text ).attr( {'text-anchor':'start'} );

这段代码的输出看起来更好：text.translate（paper.width/2，paper.height/2）；
text.getBBox（）.width
不起作用，因为它总是返回0:（谢谢！这太有用了。在raphaels SVG中对齐文本时遇到了很多麻烦，但由于这一点，我的所有问题都消失了！你摇滚乐：D