如何在React Native SVG的圆形中实现文字垂直水平居中？

我来帮你搞定这个SVG文字居中的问题！其实有几种简单的方法能实现你想要的效果，咱们一步步来看：

SVG的<Text>元素自带专门的对齐属性，配合圆形的中心坐标就能轻松实现：

修改你的代码如下：

const size = width < height ? width - 32 : height - 16
const strokeWidth = 25
const radius = (size - strokeWidth) / 2
const circunference = radius * 2 * Math.PI
return (
  <Svg width={width} height={size}>
    {/* 给Text添加对齐属性和中心坐标 */}
    <Text 
      x={size / 2} 
      y={size / 2}
      textAnchor="middle"  {/* 水平方向以文字自身中点对齐 */}
      dominantBaseline="middle"  {/* 垂直方向以文字自身中点对齐 */}
    >
      Hey
    </Text>
    <Circle 
      stroke="#2162cc" 
      fill="none" 
      cx={size / 2} 
      cy={size / 2} 
      r={radius} 
      strokeDasharray={`${circunference} ${circunference}`} 
      {...{ strokeWidth, strokeDashoffset }} 
    />
  </Svg>
)

这里把<Text>的x和y都设为圆形的中心坐标（size/2），再通过textAnchor="middle"和dominantBaseline="middle"两个属性，让文字的中点和圆形的中心完全重合，完美居中在圆形内部。

如果你的SVG画布宽度（width）大于内容区域（size），想要让圆形和文字整体在SVG里居中，可以用<G>（组）标签统一调整位置：

const size = width < height ? width - 32 : height - 16
const strokeWidth = 25
const radius = (size - strokeWidth) / 2
const circunference = radius * 2 * Math.PI
// 计算画布的水平偏移量，让内容居中
const centerOffsetX = (width - size) / 2

return (
  <Svg width={width} height={size}>
    {/* 用G标签包裹所有元素，通过translate实现整体居中 */}
    <G transform={`translate(${centerOffsetX}, 0)`}>
      <Text 
        x={size / 2} 
        y={size / 2}
        textAnchor="middle"
        dominantBaseline="middle"
      >
        Hey
      </Text>
      <Circle 
        stroke="#2162cc" 
        fill="none" 
        cx={size / 2} 
        cy={size / 2} 
        r={radius} 
        strokeDasharray={`${circunference} ${circunference}`} 
        {...{ strokeWidth, strokeDashoffset }} 
      />
    </G>
  </Svg>
)

这个方法会让整个圆形+文字的组合在SVG画布中水平居中，同时文字依然保持在圆形内部的居中状态。如果需要垂直方向也居中，只需要计算centerOffsetY = (height - size)/2，然后把translate改成(${centerOffsetX}, ${centerOffsetY})就行。

• dominantBaseline是SVG标准的垂直对齐属性，现代浏览器都支持；如果遇到特殊兼容场景，也可以用alignment-baseline="middle"替代，但前者是更推荐的写法。
• 如果要处理多行文字，可以把<Text>拆成多个<Tspan>，或者用<ForeignObject>嵌入HTML结构，但单行文字的话上面的方法完全够用。

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