SVG设置rotate(90deg)旋转后无法铺满浏览器窗口问题

现有SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" width="100" height="200" >
<g>
    <rect style="fill:#000000;" id="spinner" width="100" height="200"/>
    <circle style="fill:#ffff00;" cx="20" cy="20" r="10"/>
    <circle style="fill:#ffff00;" cx="80" cy="20" r="10"/>
    <text text-anchor="middle" x="50" y="180" fill="white">Stau 800m</text>
</g>
</svg>

初始样式将SVG宽高设为100%时，SVG可正常缩放适配浏览器窗口：

svg{width:100%; height:100%}

为实现旋转效果新增transform: rotate(90deg)属性后，SVG虽完成旋转，但上下出现空白区域，无法占满整个浏览器窗口，对应样式代码如下：

svg{width:100%; height:100%; transform: rotate(90deg);}

CSS transform 属性仅改变元素的视觉渲染结果，不会修改元素在文档流中占据的实际布局空间。
该SVG原始viewBox宽高比为1:2，设置width:100%; height:100%时，元素在布局中占据的是和浏览器视口等宽等高的矩形区域。对该区域做90度旋转后，元素内容的宽高方向互换，视觉内容比例和原始占位空间不匹配，就会出现上下留白的问题。

• 方案1：CSS旋转时同步调整尺寸与位移
  旋转后元素视觉上的宽高会互换，需要将尺寸单位换成视口单位适配，同时修正旋转原点和位移，让元素刚好铺满视口：

  /* 先清除浏览器默认边距 */
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  svg {
    /* 旋转后宽高逻辑互换，用视口宽高单位设置尺寸 */
    width: 100vh;
    height: 100vw;
    /* 旋转原点设为元素左上角，方便计算位移 */
    transform-origin: 0 0;
    /* 旋转90度后沿Y轴负方向位移100%，刚好对齐视口 */
    transform: rotate(90deg) translate(0, -100%);
    position: fixed;
    top: 0;
    left: 0;
  }
  

• 方案2：直接修改SVG内部坐标系，无需CSS旋转
  如果不需要动态切换旋转状态，直接在SVG内部调整坐标系是更稳妥的方案，从根源上避免transform带来的布局错位问题：
  将SVG的viewBox宽高互换，给内部的<g>组添加旋转变换修正位置即可，此时SVG设置宽高100%就能直接铺满容器：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="100%" height="100%" >
  <g transform="rotate(90, 0, 0) translate(0,-200)">
      <rect style="fill:#000000;" id="spinner" width="100" height="200"/>
      <circle style="fill:#ffff00;" cx="20" cy="20" r="10"/>
      <circle style="fill:#ffff00;" cx="80" cy="20" r="10"/>
      <text text-anchor="middle" x="50" y="180" fill="white">Stau 800m</text>
  </g>
  </svg>
  

内容的提问来源于stack exchange，提问作者SMX