Rotating a G container containing a rect

[BHamRunner]

I am attempting to rotate a rect element 45 degrees. When I do it, it looks great on the simulator but on my actual device the rect get cut off.

<g transform="rotate(45)">
    <rect id="blue" fill="dodgerblue" x="0" y="25%" width="130%" height="100%" />
  </g>

The results:

Result on SimulatorResult on Versa watch

How do I get the 2 to match?

[BHamRunner · Accepted solution]

I worked it out but not really what I would prefer. If I am wrapping the rect element in the g-container, the g-container will move with the rect element's x and y cords. When I rotate the element inside the g-container it will get cut off.

Starting pointrotated

So if I want to make sure it doesn't cut off I have to reduce the size of the blue box.

70% width

To get the look I was going for, I ended having to do 2 containers.

<g transform="rotate(45)">
    <rect fill="dodgerblue" x="0" y="25%" width="70%" height="70%" />
  </g>
<g transform="rotate(45)"> 
<rect fill="dodgerblue" x="25%" y="25%" width="70%" height="70%" /> 
</g>

I would prefer to be able to add multiple transforms so I could do something like: 

<g transform="rotate(45) translate(0, 25%)">
    <rect fill="dodgerblue" width="100%" height="100%" />
  </g>  

[Gondwana]

This is a known bug.