Full detail blog: https://web.archive.org/web/20180717015233/http://blog.techhysahil.com:80/svg/how-to-center-text-in-svg-shapes/ <svg width="600" height="600"> <!-- Circle --> <g transform="translate(50,40)"> <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- In Rectangle text position needs to be given half of width and height of rectangle respectively --> <!-- Rectangle --> <g transform="translate(150,20)"> <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect> <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- Rectangle --> <g transform="translate(120,140)"> <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> </svg>

之前的答案在使用圆角或描边宽度为>1时给出的结果很差。例如，你会期望下面的代码生成一个圆角矩形，但是角是由父svg组件剪辑的:

<svg width="200" height="100"> <！——这个矩形应该有圆角——> <rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/> <text x="50%" y="50%" align -baseline="middle" text-anchor="middle"> clip BORDER</text> < / svg >

相反，我建议将文本包装在svg中，然后将新的svg和rect嵌套在g元素中，如下例所示:

< !——这里的外部SVG——> <svg width="400px" height="300px"> < !——矩形/文本组——> < g变换= "翻译(50,50)" > <rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/> <svg width="200px" height="100px"> <text x="50%" y="50%" align -baseline="middle" text-anchor="middle">正确的BORDER</text> < / svg > < / g > < !——图像的其余代码——> < / svg >

这修复了上面的答案中出现的剪辑问题。我还使用transform="translate(x,y)"属性翻译了rect/text组，以演示这提供了一种更直观的方法来在屏幕上定位rect/text。

Full detail blog: https://web.archive.org/web/20180717015233/http://blog.techhysahil.com:80/svg/how-to-center-text-in-svg-shapes/ <svg width="600" height="600"> <!-- Circle --> <g transform="translate(50,40)"> <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- In Rectangle text position needs to be given half of width and height of rectangle respectively --> <!-- Rectangle --> <g transform="translate(150,20)"> <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect> <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- Rectangle --> <g transform="translate(120,140)"> <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> </svg>

For horizontal and vertical alignment of text in graphics, you might want to use the following CSS styles. In particular, note that dominant-baseline:middle is probably wrong, since this is (usually) half way between the top and the baseline, rather than half way between the top and the bottom. Also, some some sources (e.g. Mozilla) use dominant-baseline:hanging instead of dominant-baseline:text-before-edge. This is also probably wrong, since hanging is designed for Indic scripts. Of course, if you're using a mixture of Latin, Indic, ideographs or whatever, you'll probably need to read the documentation.

/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}

编辑:我刚刚注意到Mozilla也使用了支配基线:基线，这是绝对错误的:它甚至不是一个公认的值!我假设它默认的字体是字母，所以他们很幸运。

更多编辑:Safari(11.1.2)理解边前文本，但不理解边后文本。它在表意文字方面也失败了。好东西，苹果。因此，您最终可能不得不使用字母并允许降序。对不起。

在SVG中水平和垂直居中文本的简单解决方案:

Set the position of the text to the absolute center of the element in which you want to center it: If it's the parent, you could just do x="50%" y ="50%". If it's another element, x would be the x of that element + half its width (and similar for y but with the height). Use the text-anchor property to center the text horizontally with the value middle: middle The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position. Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)

下面是一个简单的演示:

<svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" stroke="红色" stroke-width="3px" fill="白色"/> <text x="50%" y="50%" main -baseline="middle" text-anchor="middle"> text </text> < / svg >

如果你想把它应用到很多元素上，你也可以把它用于CSS。例如:

svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

如果你是用编程的方式创建SVG，你可以简化它，做这样的事情:

  <g>
      <rect x={x} y={y} width={width} height={height} />
      <text
          x={x + width / 2}
          y={y + height / 2}
          dominant-baseline="middle"
          text-anchor="middle"
      >
          {label}
      </text>
  </g>