SVG文本hover旋转偏移，无法原地旋转的原因及解决咨询

偏移原因 #

偏移不是因为文本路径不是完美圆形，而是旋转原点未精准定位到SVG中心，加上<text>元素默认布局属性共同导致的。

SVG的坐标系统与CSStransform-origin的关键字计算逻辑存在差异，center关键字无法精准对应到viewBox的中心（250,250）；同时<text>元素未明确锚点定位，基线对齐的默认行为会进一步影响旋转时的位置稳定性。

修复步骤 #

1. 精准设置旋转原点 #

将transform-origin从center改为SVG坐标系的中心坐标250px 250px，匹配viewBox0 0 500 500的中心点。

2. 锚定<text>元素到中心 #

给<text>元素添加x="250" y="250"属性，确保元素锚点落在SVG中心，消除基线偏移的影响。

3. 优化过渡逻辑 #

将过渡效果直接定义在.textPath本身，避免hover时动态添加过渡可能导致的异常。

修正后的CSS代码

#ring-svg {
  padding: 0;
  margin: 0;
  width: 100svw;
  height: 100svh;
  background-color: rgb(35, 35, 35);
}

.alt-font {
  font-family: "TnganAlt";
}

#textcircle {
  fill: rgb(35, 35, 35);
}

.textPath {
  fill: wheat;
  transition: fill 2s ease;
}

#textcircle:hover+.text-circle-inside .textPath {
  fill: red;
}

#textcircle:hover+.text-circle-inside {
  animation: spinText 10s linear infinite;
  transform-origin: 250px 250px;
}

@keyframes spinText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.zsap {
  display: flex;
  justify-content: center;
  align-items: center;
}

修正后的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="ring-svg">
  <path id="textcircle" d="M250,400 a150,150 0 0,1 0,-350 a150,150 0 0,1 0,350 Z"/>
  <text font-family="Tngan" font-size="20" class="text-circle-inside" x="250" y="250">
    <textPath xlink:href="#textcircle" ariaLabel="CSS &amp; SVG are awesome" textLength="1090" class="textPath" startOffset="50%" text-anchor="middle">
      <tspan class="alt-font">&nbsp;»</tspan>AE5,Dx26Hw1E<tspan class="alt-font">j</tspan>^z<tspan class="alt-font">H</tspan>= AE5,DxxwP%1Ej^<tspan class="alt-font">«&nbsp;</tspan>AE5,Dx37zD1E<tspan class="alt-font">j</tspan>^z<tspan class="alt-font">H</tspan>= X#w6HktYAT`Bz7qpT1Ej^
    </textPath>
  </text>
</svg>

额外说明 #

• 你的路径本身是近似圆形，即使换成完美圆形，若旋转原点错误仍会出现偏移；
• 调整后的代码保证文本旋转时严格围绕SVG中心运动，不会再出现偏移问题。

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