如何仅用CSS调整不可修改的SVG text标签至矩形中心？

当然可以仅用CSS实现这个需求！咱们先分析一下当前文本定位的问题，再给出具体的调整方案：

问题根源 #

你的<text>标签目前有几个属性导致它停留在矩形右下中心：

• text-anchor="end"：让文本的右端对齐SVG的x坐标，而非中心对齐
• 内联的transform: translate(50%, -50%)：结合left:50%和top:50%，反而让文本向右偏移了自身宽度的一半，进一步加剧了偏右的位置

方案1：通用居中（推荐） #

通过修正text-anchor和transform属性，实现真正的居中对齐，不需要依赖固定像素偏移：

text {
  /* 覆盖原text-anchor:end，让文本以自身中心对齐x轴 */
  text-anchor: middle !important;
  /* 保持left/top的50%定位，但修正transform实现居中 */
  transform: translate(-50%, -50%) !important;
}

原理：

1. text-anchor: middle让文本的水平中心和SVG的x坐标对齐
2. translate(-50%, -50%)配合left:50%/top:50%，将文本的中心定位到父容器（矩形）的中心位置

方案2：固定像素偏移（适合矩形尺寸固定的场景） #

既然你提到所有矩形尺寸相同，用固定的left和top偏移也完全可行，只需覆盖原内联样式：

text {
  left: -15px !important;
  top: -15px !important;
  /* 可选：加上text-anchor:middle，确保文本自身在偏移后的位置也居中 */
  text-anchor: middle !important;
}

这个方法直接将文本从右下中心向左向上各偏移15px（对应矩形半宽/半高），刚好落到正中心。

注意事项 #

因为你无法修改<text>标签的内联样式，所以必须用!important来强制覆盖原内联的CSS属性，确保你的样式生效。

内容的提问来源于stack exchange，提问作者Wouter Dumon