React功能组件中SVG图形旋转时如何保持文本不旋转？

核心思路是将需要旋转的图形与文本分离分组：仅对椭圆等图形应用旋转变换，文本保持独立且不添加旋转，同时指定旋转原点为SVG中心，彻底避免偏移、旋转不同步问题。

修改后的代码示例 #

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  {/* 仅对椭圆所在分组应用旋转，旋转中心设为SVG中心点(250,250) */}
  <g transform={`rotate(${props.rotation} 250 250)`}>
    <ellipse 
      style={{ fill: "rgb(216, 216, 216)", stroke: "rgb(0, 0, 0)" }} 
      cx="250" 
      cy="250" 
      rx="125" 
      ry="125" 
    />
  </g>
  {/* 文本独立于旋转组，保持正立状态，优化定位逻辑 */}
  <text 
    className='unselectable' 
    style={{ 
      whiteSpace: "pre", 
      fill: "rgb(51, 51, 51)", 
      fontFamily: "Arial, sans-serif", 
      fontSize: "152.2px" 
    }} 
    x="250" 
    y="250"
    textAnchor="middle"
    dominantBaseline="middle"
  >{props.tableName}</text>
</svg>

关键细节说明 #

• 旋转中心指定：rotate(${props.rotation} 250 250) 中的250 250是SVG的中心坐标，确保椭圆围绕自身中心旋转，不会出现偏移。
• 文本定位优化：添加textAnchor="middle"和dominantBaseline="middle"，让文本自动以SVG中心对齐，无需手动计算复杂坐标，保证文本始终处于椭圆中心且正立可读。
• 分组隔离：通过<g>标签彻底分离旋转元素与文本，避免变换规则互相干扰，解决之前旋转速率不一致、元素超出边框的问题。

若需保留原文本的matrix变换，直接保留该属性即可，无需额外添加旋转相关变换：

<text 
  className='unselectable' 
  style={{ 
    whiteSpace: "pre", 
    fill: "rgb(51, 51, 51)", 
    fontFamily: "Arial, sans-serif", 
    fontSize: "152.2px" 
  }} 
  x="166.561" 
  y="303.035" 
  transform="matrix(0.66583, 0, 0, 0.739777, 79.047778, 60.064947)"
>{props.tableName}</text>

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