如何单独旋转SVG文本元素，使其在主SVG旋转后保持直立？

核心问题是默认旋转以SVG左上角(0,0)为原点，导致文本偏移。以下是两种实用的解决方法：

方法1：指定文本旋转的原点为自身位置 #

1. 先给整个SVG（或包含所有球场元素的<g>标签）设置围绕中心的90度旋转，避免整体偏移：

   <g transform="rotate(90 [SVG宽度/2] [SVG高度/2])">
     <!-- 足球场图形（circle、矩形等元素） -->
   </g>
   

   把[SVG宽度/2]和[SVG高度/2]替换为实际SVG的中心坐标，比如SVG宽600、高400的话，就是rotate(90 300 200)。

2. 对每个文本元素，在rotate变换里指定旋转原点为文本自身的x、y坐标，再添加反向的-90度旋转：

   <text x="300" y="80" text-anchor="middle" 
         transform="rotate(-90 300 80)" fill="#000">
     中场
   </text>
   

   这里rotate(-90 300 80)的后两个参数是旋转原点，和文本的定位坐标一致，旋转后文本会围绕自身中心转动，不会移出可视区域。

方法2：调整变换顺序（先旋转后平移） #

利用SVG变换“从右到左执行”的特性，先对文本做-90度旋转，再平移到目标位置：

<text text-anchor="middle" fill="#000"
      transform="translate(300 80) rotate(-90)">
  中场
</text>

这种方式下，文本先围绕自身中心旋转-90度，再被平移到目标位置，同样能保持直立且位置准确。

额外提示 #

• 如果需要更精确的垂直对齐，可配合dominant-baseline属性调整；
• 若整体旋转后部分元素超出可视范围，可同步调整SVG的viewBox参数适配。

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