之前的答案在使用圆角或描边宽度为>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。

对齐基线不是这里应该使用的正确属性。正确的答案是使用支配基线="central"和文本锚="middle"的组合:

<svg width="200" height="100"> < g > <rect x="0" y="0" width="200" height="100" style="stroke:red;笔划宽度:3 px;填充:白色;" / > <text x="50%" y="50%" style=" font - family:宋体;文本链接:中间;字体大小:40像素;“>文本文本> < / < / g > < / svg >

如果你是用编程的方式创建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>

你可以直接使用text-anchor = "middle"属性。我建议在矩形和文本上创建一个包装器svg元素。这样你就可以使用一个css选择器来使用整个元素。确保你把'x'和'y'属性的文本为50%。

<svg class="svg-rect" width="50" height="40"> <矩形x = " 0 " y = " 0 " rx = =“3”变化中“3”宽度=“50”高度=“40”填补= " # e7e7e7 " > < /矩形> <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em"> </text> . < / svg >

SVG 1.2 Tiny添加了文本换行，但是您在浏览器中看到的大多数SVG实现(Opera除外)都没有实现这个特性。这通常取决于您(开发人员)手动定位文本。

SVG 1.1规范很好地概述了这一限制，以及克服它的可能解决方案:

Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods: The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text). The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters who start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.) Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)

http://www.w3.org/TR/SVG11/text.html#Introduction

As a primitive, text wrapping can be simulated by using the dy attribute and tspan elements, and as mentioned in the spec, some tools can automate this. For example, in Inkscape, select the shape you want, and the text you want, and use Text -> Flow into Frame. This will allow you to write your text, with wrapping, which will wrap based on the bounds of the shape. Also, make sure you follow these instructions to tell Inkscape to maintain compatibility with SVG 1.1: https://wiki.inkscape.org/wiki/Frequently_asked_questions#What_about_flowed_text.3F

此外，还有一些JavaScript库可以用来动态自动化文本包装: https://old.carto.net/papers/svg/textFlow/

值得注意的是，CSVG将形状包装到文本元素的解决方案(例如，参见他们的“按钮”示例)，尽管重要的是要提到他们的实现在浏览器中不可用: https://users.monash.edu/~clm/csvg/about.html

我提到这一点是因为我已经开发了一个csvg启发的库，它允许您做类似的事情，并且可以在web浏览器中工作，尽管我还没有发布它。

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>