將文本中心對齊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是圓的半徑，我們需要用當前字體大小以使文本位於圓圈下方。 –

它是否考慮到了放大？文本和圓圈在放大時分散。 –

回答