SVG: вращать весь текст

Question

Я хочу повернуть один список слов на угол. Но наклонены только символы:

Мой код здесь:

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

Заранее благодарим за помощь в повороте всех слов

Answer 1

Как я уже говорил, вам нужно использовать transform="rotate(... вместо 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>

Если это не работает для вас, обновите ваш код с рабочим примером.