旋转后制作svg fill div

Question

我有viewBox={ "0 0 150 345" }的内嵌svg 我希望能够以90度，180度，270度（旋转原点是svg的中心）旋转它，并且svg将把容器的整个空间放在任何位置。

目前我有：

<svg
  style={{ height: '100%', width: '100%' }}
  viewBox={ "0 0 150 345" }
  preserveAspectRatio="xMidYMid"
>
    <g transform={ "rotate(90 75.5 172.5" }>
        // some content
    </g>
</svg>

问题是，当旋转为90度或270度时，svg不会根据宽度进行缩放，而是仍然基于高度。

我错过了什么？