将文本中心对齐SVG圆圈？

<g transform="translate(300, 300)"> 
    <circle r="5px"></circle> 
    <text>My Label</text> 
</g>

我需要的标签，以圆下方居中。有这个问题的简单解决方案吗？

一个选项：

<g transform="translate(300, 300)"> 
    <circle r="5px"></circle> 
    <text baseline-shift="-20px" text-anchor="middle">My Label</text> 
</g>

的-20px取决于您的字体大小，也许有人在做降一种相对的方式，但text-anchor="middle"将围绕文本。

2014-02-19 18:15:40

这工作完美。文本将是一个在px中定义的常量大小，所以相对的解决方案（尽管它会很好）不是必需的。谢谢。 – user1405177

你可以使用'em'单位给你一个基于字体大小的值。我不认为所有浏览器都支持'baseline-shift'，所以我建议使用'y'或'dy'代替。在这个例子中，这将是'我的标签'，因为5是圆的半径，我们需要用当前字体大小以使文本位于圆圈下方。 –

它是否考虑到了放大？文本和圆圈在放大时分散。 –

回答