CODEWITHSUNDEEP
csssvg
ashish singh
ashish singh

Reputation: 6914

rotate tspan element in svg?

in tspan we have rotate attribute which rotates each character but i want to rotate whole tspan as one and transform="rotate(90)" doesnt works?

How can i achieve it?

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

I wish word lab could be rotated

Upvotes: 0

Views: 2372

Answers (1)

Nimitt Shah
Nimitt Shah

Reputation: 4587

I would suggest separate text for 3 tspan. Then you can use transform:rotate() on text.

See below example.

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

Upvotes: 2

Related Questions