SVG旋转时如何保持文本与圆形的视觉距离恒定？

问题本质 #

你遇到的视觉差异是文本基线对齐导致的感知偏差：默认情况下SVG文本的y属性对应字符的基线（比如小写字母x的底部），反向旋转文本时，基线方向随角度变化，导致视觉上文本与圆形的距离看起来不一致——即便两者几何中心的实际距离完全相同。

解决方法 #

给文本元素添加dominant-baseline="middle"属性，让文本的垂直几何中心与设定的y坐标对齐，而非基线对齐。这样无论旋转角度如何，文本中心始终和目标点重合，视觉距离就会保持一致。

同时修正原SVG中的语法错误（未闭合的<g>标签）。

修改后的代码 #

<svg
      height="200"
      viewBox="0 0 100 100"
      fill="none"
      transform="rotate(45, -16, -16)"
    >
      <circle
        cx="30"
        cy="30"
        r="5"
        fill="#FFFFFF"
        stroke="#3D3D3D"
        stroke-width="1.5"
      />
      <g transform="rotate(90, 20, 20)">
        <path
          d="M15.6528 7.06945L15.4939 7.36025L15.602 7.67352L17.8504 14.1941L2.3372 6.25279L18.9596 1.01652L15.6528 7.06945Z"
          fill="white"
          stroke="#3D3D3D"
          stroke-width="1.5"
        />
      </g>
      <text
        x="30"
        y="70"
        text-anchor="middle"
        dominant-baseline="middle"
        font-size="14px"
        fill="#3D3D3D"
        pointer-events="none"
        font-weight="500"
        transform="rotate(-45, 30, 70)"
      >
         some text here
      </text>
    </svg>

补充优化方案 #

如果仍有细微视觉偏差，可以将文本包裹在<g>组中，先平移到目标位置再旋转，变换顺序更直观，避免原点混淆：

<g transform="translate(30,70) rotate(-45)">
  <text
    x="0"
    y="0"
    text-anchor="middle"
    dominant-baseline="middle"
    font-size="14px"
    fill="#3D3D3D"
    pointer-events="none"
    font-weight="500"
  >
     some text here
  </text>
</g>

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