如何在 SVG 中旋转期间保持文本方向不变

在 SVG 中，当元素旋转时，其中的文本也会跟着旋转。但是有时候我们可能需要文本始终保持水平方向不发生旋转。下面就是一些方法来实现这个目标。

方法一：使用 textPath 元素

textPath 元素是 SVG 中用来沿着路径绘制文本的元素。我们可以把文本放在一个 textPath 元素中，并让这个 textPath 元素跟着我们要旋转的元素一起旋转。这样就能实现文本保持水平不旋转的效果。

<svg viewBox="0 0 100 100">
  <path d="M10,50 Q50,-10 90,50" stroke="black" fill="none" />
  <text font-size="12">
    <textPath xlink:href="#path" startOffset="0">
      Hello World!
    </textPath>
  </text>
  <g transform="rotate(45 50 50)">
    <use xlink:href="#path" stroke="red" fill="none" />
    <use xlink:href="#text-on-path" fill="black" />
  </g>
</svg>

在上面的代码中，我们首先定义了一个 path 元素，然后在它上面放置了一个 text 元素，文本内容为 "Hello World!"。这个 text 元素内部包含一个 textPath 元素，xlink:href 属性指向了我们定义的路径 path 元素。startOffset 属性值为 0，表示文本从路径起点开始。

接着我们使用 use 元素来复用路径和文本。其中 g 元素通过 rotate 函数绕中心点 (50, 50) 旋转了 45 度，use 元素分别复用了路径和文本。在旋转后，文本始终保持水平不旋转。

代码中的 id 属性可以为任何值，用来给某个元素定义一个唯一标识符。在 xlink:href 属性中使用 # 符号加上该元素的 id 属性值，就能引用该元素了。

方法二：使用 glyph-orientation-vertical 属性

glyph-orientation-vertical 属性可以让文本（包括中文字）保持垂直，而不是像默认情况下那样随着元素旋转而旋转。但是这个属性只在 Firefox 和 Safari 中支持，Chrome 和 IE 不支持。

<svg viewBox="0 0 100 100">
  <rect x="30" y="30" width="40" height="40" fill="red" />
  <text font-size="20" x="50" y="60" text-anchor="middle"
        glyph-orientation-vertical="0">
    Hello World!
  </text>
  <g transform="rotate(45 50 50)">
    <use xlink:href="#rect" stroke="black" fill="none" />
    <use xlink:href="#text" fill="black" />
  </g>
</svg>

在上面的代码中，我们定义了一个 rect 元素和一个 text 元素。text 元素有一个额外的属性 glyph-orientation-vertical，值为 0，表示文本始终保持垂直方向。注意 text 元素的中心点坐标 (x, y) 正好位于 rect 元素的中心。

在 g 元素内部，我们使用 use 元素来复用了 rect 元素和 text 元素，并使用 rotate 函数让其绕中心点旋转了 45 度。这个旋转过程中，文本始终保持垂直，不发生旋转。

方法三：使用 transform-box 属性

transform-box 属性可以让元素绕着一个自定义的参考框旋转，默认情况下参考框的大小就是元素自身大小。我们可以让参考框比元素自身更大，这样文本就会随着参考框旋转而旋转，但是文本内容不会发生变化。

<svg viewBox="0 0 100 100">
  <rect x="30" y="30" width="40" height="40" fill="red" />
  <text font-size="20" x="50" y="60" text-anchor="middle"
        transform="translate(-5, 25)" transform-box="fill-box">
    Hello World!
  </text>
  <g transform="rotate(45 50 50)">
    <use xlink:href="#rect" stroke="black" fill="none" />
    <use xlink:href="#text" fill="black" />
  </g>
</svg>

在上面的代码中，我们定义了一个 rect 元素和一个 text 元素。text 元素有两个额外的属性 transform 和 transform-box，分别表示移动文本位置和自定义参考框的大小。translate 函数表示将元素往左上方移动 5 像素，往下移动 25 像素，这样无论元素如何旋转，文本始终保持在正确位置上。

transform-box 属性值为 fill-box，表示使用元素的 fill 属性作为参考框大小。由于 text 元素和 rect 元素的 fill 属性相同，因此这里的参考框大小和元素自身大小相同。

在 g 元素内部，我们使用 use 元素来复用了 rect 元素和 text 元素，并使用 rotate 函数让其绕中心点旋转了 45 度。这个旋转过程中，文本也参照参考框进行旋转，但是文本内容始终保持不变。

以上就是三种方法来实现在 SVG 中旋转期间保持文本方向不变的效果，你可以根据自己的需求选择相应的方法。