Repository: flutter
Issue: [flutter_svg] unexpected size when using Transform.rotate
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/591_

Original report by @berg223 on Aug 26, 2021

## Description

Both size of horizonMatchstick and verticalMatchstick in the code is unexpected.

## Reproduce

flutter code:
```dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: buildTest(),
    );
  }

  Widget buildTest() {
    double width = 137.2;
    double height = width / 7.5;
    return SizedBox(
        width: width,
        height: width,
        child: Stack(
          children: [
            Center(
              child: Transform.rotate(
                  angle: -math.pi / 4, child: horizonMatchstick(width, height)),
            ),
            Center(
              child: Transform.rotate(
                  angle: -math.pi / 4,
                  child: verticalMatchstick(height, width )),
            ),
          ],
        ));
  }

  Widget horizonMatchstick(double width, double height) {
    return SvgPicture.asset(
      "assets/matchstick.svg",
      width: width,
      height: height,
    );
  }

  Widget verticalMatchstick(double width, double height) {
    return SvgPicture.asset(
      "assets/matchstick_up.svg",
      width: width,
      height: height,
    );
  }
}
```

code in assets/matchstick.svg
```svg
<?xml version="1.0"?>
<svg width="25" height="5"
    viewBox="0 0 25 5"
    xmlns="http://www.w3.org/2000/svg">

    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255, 153, 0);stop-opacity:1" />
            <stop offset="60%" style="stop-color:rgb(255, 153, 0);stop-opacity:1" />
            <stop offset="61%" style="stop-color:#cc7a00;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#cc7a00;stop-opacity:1" />
        </linearGradient>
    </defs>

    <rect x="0" y="0"
        fill="url(#grad1)"
        width="25" height="5"
        rx="2" ry="2.5"/>

    <ellipse cx="23" cy="2.5" rx="2" ry="2.5"
        style="fill:#ff471a;"/>
</svg>
```

code in assets/matchstick_up.svg
```svg
<?xml version="1.0"?>
<svg width="5" height="25"
    viewBox="0 0 5 25"
    xmlns="http://www.w3.org/2000/svg">

    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255, 153, 0);stop-opacity:1" />
            <stop offset="60%" style="stop-color:rgb(255, 153, 0);stop-opacity:1" />
            <stop offset="61%" style="stop-color:#cc7a00;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#cc7a00;stop-opacity:1" />
        </linearGradient>
    </defs>

    <rect x="0" y="0"
        fill="url(#grad1)"
        width="5" height="25"
        rx="2.5" ry="2"/>
    <ellipse cx="2.5" cy="2" rx="2.5" ry="2"
        style="fill:#ff471a;"/>
</svg>
```

---
Comment by @berg223 on Aug 26, 2021
@dnfield could u please have a look?

---
Comment by @berg223 on Aug 26, 2021
What I knows for now: if replace Stack as Column, the issue still exists.

---
Comment by @berg223 on Aug 27, 2021
The issue is that svg cannot support width and height at the same time. 

---
Comment by @dnfield on Aug 27, 2021
I'm not sure I fully grasp the bug here - what do you expect this to look like? 

I wonder if you just need to experiment with the `fit` property, but it's hard to say without knowing exactly what you expect the output to look like vs. what you're getting.

---
Comment by @berg223 on Aug 28, 2021
@dnfield I just want to set height and width at the same time. And i don't want to preserve the aspect. Is that possiable?

---
Comment by @bdlukaa on Sep 5, 2021
Use a `RotatedBox` insated of Transform.rotate