为何SVG内rect元素占满宽度却无法占满父SVG高度？

你的SVG代码中，<svg>标签同时设置了固定宽高width="100"、height="100"，以及viewBox="0 0 1920 1080"。核心问题出在SVG默认的preserveAspectRatio属性上——它的默认值是xMidYMid meet，这个规则会强制保留viewBox的原始宽高比（1920:1080=16:9），但你给SVG设置的宽高是1:1，比例不匹配，渲染时会按比例缩放viewBox内的内容，让它完整放进100x100的画布，这就导致高度方向出现留白，矩形自然无法占满。

下面是几种解决方式：

• 修改preserveAspectRatio属性为none，强制拉伸内容填满整个SVG画布，忽略宽高比：

  <svg width="100" height="100" viewBox="0 0 1920 1080" preserveAspectRatio="none">
    <rect x="0" y="0" width="1920" height="1080" />
  </svg>
  

• 让SVG的宽高比例和viewBox一致，比如把height改为56.25（计算方式：100*(1080/1920)=56.25），匹配16:9的比例后内容会自动填满：

  <svg width="100" height="56.25" viewBox="0 0 1920 1080">
    <rect x="0" y="0" width="1920" height="1080" />
  </svg>
  

• 若在网页中使用，也可以通过CSS控制渲染行为，比如给SVG添加object-fit: fill样式：

  svg {
    width: 100px;
    height: 100px;
    object-fit: fill;
  }
  

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