将文本中心对齐SVG圈下面？ [英] Align text center below a SVG circle?

问题描述

假设我有以下SVG：

Suppose I have the following SVG:

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

我需要标签在圆圈下居中。是否有一个简单的解决方案来解决这个问题？

I need the label to be centered below the circle. Is there a simple solution to this problem?

推荐答案

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

-20px取决于您的字体大小，也许有人有相对的方式去掉，但 text-anchor =middle会将文字居中。

The -20px depends on your font size, and maybe someone has a relative way of doing the drop, but the text-anchor="middle" will center the text.

这篇关于将文本中心对齐SVG圈下面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！