旋转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/