Safari中内联SVG百分比尺寸未正常生效问题技术问询

我之前也踩过Safari这个内联SVG百分比高度的坑！你遇到的问题是Safari对SVG元素的百分比尺寸计算逻辑和Chrome、Firefox不一致，当父容器使用border-box且带有padding时，SVG的height: 100%无法正确继承容器的内容区高度，导致显示异常。

先还原一下你的原始代码：

原始HTML #

<div class="container">
  <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" />
  </svg>
</div>

原始CSS #

* { box-sizing: border-box; }
.container { 
  width: 200px; 
  height: 200px; 
  padding: 80px; 
  background-color: #fcc; 
}
svg { 
  display: block; 
  fill: black; 
  width: 100%; 
  height: 100%; 
}

下面是几种经过验证的解决方案，都能在Safari中正常生效：

方案1：使用Flexbox让容器自动分配空间 #

这是最简洁的方法，利用Flexbox的特性让SVG自动填充容器的可用内容空间，不需要依赖百分比尺寸：

修改.container的CSS，添加display: flex，同时移除SVG的width和height，改用flex: 1：

* { box-sizing: border-box; }
.container { 
  width: 200px; 
  height: 200px; 
  padding: 80px; 
  background-color: #fcc; 
  display: flex; /* 启用Flexbox布局 */
}
svg { 
  display: block; 
  fill: black; 
  flex: 1; /* 让SVG自动填充容器的可用空间 */
}

Flexbox会自动处理容器的padding和内容区尺寸，Safari能完美识别这种布局逻辑。

方案2：使用绝对定位锁定SVG尺寸 #

如果不想用Flexbox，可以给容器添加相对定位，然后让SVG绝对定位铺满内容区：

修改CSS如下：

* { box-sizing: border-box; }
.container { 
  width: 200px; 
  height: 200px; 
  padding: 80px; 
  background-color: #fcc; 
  position: relative; /* 设置父容器为相对定位 */
}
svg { 
  position: absolute; /* 绝对定位 */
  top: 80px; /* 对齐容器的padding-top */
  left: 80px; /* 对齐容器的padding-left */
  width: calc(100% - 160px); /* 计算内容区宽度：容器总宽 - 左右padding */
  height: calc(100% - 160px); /* 计算内容区高度：容器总高 - 上下padding */
  display: block; 
  fill: black; 
}

这种方法需要手动计算偏移量，适合需要精确控制SVG位置的场景。

方案3：利用viewBox维持SVG比例 #

如果你的SVG是固定比例的（比如示例中的正方形），可以移除SVG的height设置，让它依赖viewBox自动计算高度：

svg { 
  display: block; 
  fill: black; 
  width: 100%; 
  /* 移除height，由viewBox自动维持原始比例 */
}

这种方法适合不需要强制铺满容器高度，只需要保持SVG原始宽高比的场景。

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