在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/