css - 在 svg 中旋转 tspan 元素？

Question

在 tspan 中，我们有旋转属性，可以旋转每个字符，但我想将整个 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 tspan 使用单独的文本。然后您可以对文本使用 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/