旋转嵌套的SVG为矩形

Question

尝试旋转复合SVG时，我很费劲。 SVG具有矩形比例，因此当我绕中心旋转时，SVG的某些部分将呈现在视口之外。

我的目标是将整个SVG文档旋转90度。我完成这项工作的唯一方法是使SVG宽度/高度为正方形，并删除preserveAspectRatio属性，如下所示：

原始

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="300" height="443" viewBox="0 0 77 112">

旋转后

<svg xmlns="http://www.w3.org/2000/svg" width="443" height="443" viewBox="0 0 77 112" transform="rotate(90)">

现在，旋转的SVG位于视图框内，因为我将其设置为正方形尺寸，但是上方和下方都有空白间距。 这显然是不必要的。 尝试使用transform-origin并交换width和height的值，但无法使其按我想要的方式工作。

请参见下图，这是我的出发点。

有关旋转SVG的信息，请参见此小提琴，在顶部和底部有不必要的白色间距。 https://jsfiddle.net/bdkst8er/