CODEWITHSUNDEEP
cssangularjssvg
Gorgui Ndong
Gorgui Ndong

Reputation: 153

SVG : rotate whole texte

I want to rotate one list of words with an angle. But only the characters are tilted : Only characters are tilted

My code is here :

<svg width="2000" height="130">
      <g *ngFor="let fruit of fruits">
        <g>
          <text [attr.x]="fruit.x" [attr.y]=50 dx=-10 dy=-7 rotate="-30 fruit.x 50">
            {{fruit.name}}
          </text>
        </g>
      </g>
</svg>

Thanks in advance for your help to rotate all the words

Upvotes: 1

Views: 65

Answers (1)

enxaneta
enxaneta

Reputation: 33044

As I've commented you need to use transform="rotate(... instead of rotate

<svg width="2000" height="130">
      <g>
        <g>
          <text x="100" y=50 dx=-10 dy=-7 transform="rotate(-30 100 50)">
            fruit name 1
          </text>
        </g>
      </g>
      <g>
        <g>
          <text x="200" y=50 dx=-10 dy=-7 transform="rotate(-30 200 50)">
            fruit name 2
          </text>
        </g>
      </g>
</svg>

If this is not working for you please update your code with an working example.

Upvotes: 1

Related Questions