SVG中实现文本在圆形内绕自身中心旋转的问题

核心问题分析 #

原代码的问题在于：

• 嵌套SVG增加了坐标复杂度，文本的旋转中心计算错误，导致旋转后偏移出圆形。
• 文本初始位置未与圆形中心完全对齐，且旋转时未以自身中心为基准。

修正后的代码 #

<html>
  <head>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="200" 
      height="200" 
      viewBox="0 0 200 200" 
      preserveAspectRatio="xMinYMin">
      <style>
        circle{
          fill: #dcdcc6;
        }
        text{
          font-size: 11px;
          text-anchor: middle;
          dominant-baseline: middle; /* 垂直居中对齐 */
          fill: rgb(51, 65, 74); 
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }
      </style>
      <symbol id="circle" viewBox="0 0 16 16">
        <circle cx="8" cy="8" r="7"></circle>
      </symbol>
      <!-- 用g统一管理圆形和文本，确保坐标一致 -->
      <g>
        <use href="#circle" x="100" y="100" width="40" height="40"></use>
        <!-- 将g定位到圆形中心：100 + 40/2 = 120，y同理 -->
        <g id="textContainer" transform="translate(120, 120)">
          <text x="0" y="0">TEXT</text>
        </g>
      </g>
    </svg>
    <script>
      var angle = 0;
      var textContainer = document.getElementById('textContainer');
      textContainer.addEventListener('click', function(event) {
        angle += 45;
        // 直接以g的原点（即文本中心）为旋转中心旋转
        this.setAttribute('transform', `translate(120, 120) rotate(${angle})`);
      });
    </script>
  </body>
</html>

关键修改点 #

• 简化坐标结构：移除嵌套的SVG，改用g元素将文本定位到圆形中心（translate(120,120)，即use元素的左上角坐标+宽高的一半）。
• 文本居中对齐：给文本添加dominant-baseline: middle，配合text-anchor: middle，让文本的中心与g元素的原点完全重合。
• 旋转逻辑优化：直接对包裹文本的g元素应用旋转，旋转中心就是g的原点（文本自身中心），无需额外计算偏移，确保旋转时文本始终处于圆形内。
• 复用symbol的正确性：symbol的viewBox定义了基础坐标，use的width/height会按比例缩放圆形，圆形中心的计算为x + width/2、y + height/2，保证文本与圆形中心对齐。

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