如何实现SVG文本旋转-90度后将其中点固定在指定坐标位置

核心实现代码 #

<text 
  x="200" 
  y="300"
  text-anchor="middle"
  dominant-baseline="middle"
  transform="rotate(-90, 200, 300)"
>
  Some Text
</text>

实现逻辑 #

• 首先通过两个对齐属性锁定文本中点：
  • text-anchor="middle"：设置文本水平方向以中点对齐锚点
  • dominant-baseline="middle"：设置文本垂直方向以中线对齐锚点
    此时文本的几何中点会和你指定的x、y坐标点完全重合
• 旋转操作直接指定目标点P为旋转中心即可：rotate(-90, 200, 300)的三个参数分别是「旋转角度、旋转中心x坐标、旋转中心y坐标」，旋转时中心点位置不会发生偏移

原代码错误原因 #

你原有代码的变换顺序逻辑错误：SVG的transform属性会按从左到右的顺序依次执行变换，你先执行了绕原点的-90度旋转，此时整个坐标系已经旋转，后续执行的translate(200,300)是在旋转后的坐标系上做位移，自然无法得到预期的定位效果。
如果要拆分变换写，也可以按「先位移到目标点、再旋转」的顺序调整，效果完全一致：

<text 
  text-anchor="middle"
  dominant-baseline="middle"
  transform="translate(200, 300) rotate(-90)"
>
  Some Text
</text>

内容的提问来源于stack exchange，提问作者Page not found