如何在SVG中完整显示旋转后的文本？解决文本截断问题

你的问题出在SVG文本旋转时的原点定位和可视区域设置上：默认rotate(90)是绕坐标原点(0,0)旋转，导致文本偏移出SVG的viewBox范围，所以只显示一部分。下面是几种可行的解决方法：

方法1：指定旋转原点并调整viewBox #

修改rotate的参数，明确旋转中心为文本的起始位置，同时扩大viewBox的宽度以容纳旋转后的文本长度：

<svg width="100" viewBox="-3 0 196 196">
  <!-- rotate(90 旋转中心x 旋转中心y) -->
  <text x="0" y="10" fill="red" transform="rotate(90 0 10)">Andaman and Nicobar Islands</text>
  <text x="0" y="-40" fill="red" transform="rotate(90 0 -40)">United States of America</text>
</svg>

这里把viewBox的宽度从68改为196，刚好能容纳最长文本旋转后的长度；同时用rotate(90 cx cy)让文本绕自身起始点旋转，避免偏移出可视区域。

方法2：用translate+rotate组合调整位置 #

先通过translate把文本移到合适位置，再执行旋转，确保旋转后的文本落在SVG范围内：

<svg width="100" viewBox="-3 0 196 196">
  <text fill="red" transform="translate(10, 0) rotate(90)">Andaman and Nicobar Islands</text>
  <text fill="red" transform="translate(10, -50) rotate(90)">United States of America</text>
</svg>

这种方式相当于先把文本定位到y轴附近，再旋转90度，文本会沿着y轴垂直排列，不会超出SVG的可视区域。

关键要点 #

• 旋转文本时，一定要考虑旋转后的文本边界范围，确保它完全落在SVG的viewBox或可视区域内；
• 如果是动态文本，可以通过JavaScript的getBBox()方法获取文本的实际尺寸，再动态调整viewBox或文本位置，但静态场景下手动调整参数更高效。

内容的提问来源于stack exchange，提问作者Sund'er