повернуть элемент TSPAN в SVG?

Question

in tspan у нас есть атрибут rotate, который вращает каждый символ, но я хочу повернуть все tspan как единое целое, а transform="rotate(90)" не работает?

Как я могудостичь этого?

<svg >
  <text x="10" y="30" style="font-size:12pt;">
    F
    <tspan>a</tspan>
    <tspan transform="rotate(90)"fill="red">lab</tspan>
    <tspan >l</tspan>
  </text>
</svg>

Я хочу, чтобы слово lab могло вращаться

Answer 1

Я бы предложил отдельный текст за 3 чл.Затем вы можете использовать transform:rotate() для текста.

См. Пример ниже.

<!--Rotate Example:-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="30" style="font-size:12pt;">
    F
    <tspan>a</tspan>
  </text>
  <text x="35" y="30" style="font-size:12pt;" transform="rotate(90 45 25)">
    <tspan fill="red">lab</tspan>
  </text>
  <text x="60" y="30" style="font-size:12pt;">
    <tspan >l</tspan>
  </text>
</svg>

<!--Original:-->
<svg >
  <text x="10" y="30" style="font-size:12pt;">
    F
    <tspan>a</tspan>
    <tspan fill="red">lab</tspan>
    <tspan >l</tspan>
  </text>
</svg>

https://jsfiddle.net/nimittshah/jybs79v1/