Chromium旋转SVG元素出现额外空白问题求助

问题分析 #

从Chromium 108版本开始，浏览器对SVG根元素transform属性的布局计算逻辑发生了变化：旧版会自动适配旋转后的SVG实际尺寸，新版则基于SVG根元素原始的width和height值计算布局边界，导致旋转后的SVG内容超出原始边界时，页面出现额外空白。

解决方案 #

由于无法使用JavaScript修改SVG，我们可以通过调整SVG的viewBox、尺寸属性以及变换逻辑，让SVG的布局边界完全匹配旋转后的内容，从而消除空白。以下是几种可行的纯SVG/内联CSS方案：

方案1：调整根SVG尺寸与变换参数 #

将根SVG的width和height替换为旋转后的实际尺寸（原宽高互换），同时修正translate参数，再结合viewBox锁定原始内容区域：

<svg version="1.1" width="1575" height="2175" viewBox="0 0 2175 1575" transform="rotate(270) translate(-1575, 0)" xmlns="http://www.w3.org/2000/svg">
  <rect width="2175" height="1575" fill="red" />
</svg>

• 原SVG宽2175、高1575，旋转270度后实际显示为宽1575、高2175，因此修改根SVG的width和height为对应值
• 修正translate参数为(-1575, 0)，确保旋转后的内容完全贴合SVG边界
• viewBox="0 0 2175 1575"保留原始内容的坐标系统，避免内容变形

方案2：将变换移至内部<g>元素 #

把旋转变换放到内部的<g>容器中，同时调整viewBox以包含旋转后的内容区域：

<svg version="1.1" width="1575" height="2175" viewBox="-1575 0 2175 1575" xmlns="http://www.w3.org/2000/svg">
  <g transform="rotate(270)">
    <rect width="2175" height="1575" fill="red" />
  </g>
</svg>

• 根SVG的width和height设置为旋转后的尺寸
• viewBox="-1575 0 2175 1575"扩展了SVG的可视区域，确保旋转后的内容完全被包含
• 变换逻辑移至内部<g>，避免根SVG的变换影响布局边界计算

通用适配方案（无需预先判断是否旋转） #

如果无法预先确定是否需要旋转，可以使用fit-content让SVG自动适配内容尺寸，结合viewBox锁定原始坐标：

<svg version="1.1" viewBox="0 0 2175 1575" xmlns="http://www.w3.org/2000/svg" style="width: fit-content; height: fit-content;">
  <g transform="rotate(270) translate(-1575, 0)">
    <rect width="2175" height="1575" fill="red" />
  </g>
</svg>

• 移除根SVG的固定width和height，改用style="width: fit-content; height: fit-content;"让浏览器自动计算适配尺寸
• 变换逻辑移至内部<g>，确保布局边界跟随实际内容

以上方案均无需JavaScript，仅通过SVG属性和内联CSS即可解决Chromium 108+中的空白问题，且适用于无头打印场景。

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