如何在<svg>元素内居中<text>元素？附相关代码片段

我来帮你梳理几种实现SVG内<text>元素居中的可靠方法，结合你的代码场景逐一拆解：

1. 水平居中对齐 #

要让文本在SVG内水平居中，核心是两个属性的配合：

• 设置text-anchor="middle"：这个属性会让文本的对齐点落在你设置的x坐标位置的中间，而非默认的起始端。
• 将x值设为SVG的水平中心：可以直接用百分比x="50%"（相对于SVG自身宽度），或者计算具体数值（比如你的SVG宽度是654px，那x=327即可）。

修改你的text标签示例：

<text text-anchor="middle" x="50%" y="..." font-family="Abbey" font-size="60px" style="font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
  <!-- 你的tspan内容 -->
</text>

如果包含<tspan>多行文本，记得给tspan也设置text-anchor="middle"，并用dy控制行间距，保证整体水平对齐一致。

2. 垂直居中对齐 #

垂直居中需要处理文本基线的问题，推荐两种实用方式：

方式一：使用dominant-baseline属性 #

把y设为SVG的垂直中心（比如y="50%"），再加上dominant-baseline="middle"，它会让文本的垂直中心对齐到y坐标位置：

<text text-anchor="middle" x="50%" y="50%" dominant-baseline="middle" ...>
  你的文本内容
</text>

方式二：结合dy调整偏移 #

如果遇到极少数浏览器对dominant-baseline支持不佳的情况，可以用dy属性微调。比如先把y设为50%，再加上dy=".3em"（这个值可根据字体大小调整，一般0.3-0.5em左右）：

<text text-anchor="middle" x="50%" y="50%" dy=".3em" ...>
  你的文本内容
</text>

3. 针对你现有代码的调整建议 #

看你代码里的<rect>设置了width="100%"，但SVG本身宽度是654px，若要让文本在这个rect范围内居中，可以把text的x设为rect的中心（比如rect的x是20，宽度为SVG视口宽度，那中心就是20 + 654/2 = 347）。不过如果只是要在SVG可视区域内居中，直接用x="50%"更简便。

另外注意你的text标签同时写了font-size="60px"和style="font:bold 80px Arial"，字体大小会被style里的80px覆盖，建议统一到一个地方，避免样式冲突。

完整适配示例代码 #

给你一个贴合你场景的完整调整示例：

<div id="fixed-target" style="display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
  <svg width="654" height="83">
    <rect id="rect1" x="20" y="59" width="100%" height="83px" fill="transparent" stroke="transparent"></rect>
    <text text-anchor="middle" x="50%" y="50%" dominant-baseline="middle" font-family="Abbey" font-size="80px" style="font:bold; color:#fff; fill:rgb(0,0,0);">
      <tspan text-anchor="middle" dy="0">你的文本内容</tspan>
      <!-- 多行文本可添加：<tspan text-anchor="middle" dy="1em">第二行文本</tspan> -->
    </text>
  </svg>
</div>

这样调整后，文本就能在SVG元素内实现水平+垂直的精准居中对齐了。

内容的提问来源于stack exchange，提问作者Scott C Wilson