与父容器相比的 SVG 大小。为什么不 100% 最小高度填充父母？

Question

我在子 DIV 元素中有一个 SVG（屏幕截图中的红色矩形），它位于父 DIV 元素（绿色矩形）内。

.parent {
  position: relative;
  background: green;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow: hidden;  
  height: 400px; 
  width: 270px;
}

.child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);

}

<div class="parent">
    <div class="child">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewPort="550 0 600 430.95" viewBox="246 0 600 430.95" preserveAspectRatio="xMidYMid meet" >
<rect width="100%" height="100%" fill="red" />
</svg>

 </div>
</div>

我想让 SVG 缩放到与父 DIV 相同的大小，所以我使用了 min-height 属性，我已将其设置为 100%。出于某种原因，子 DIV 中的 SVG 无法缩放到父 DIV 的大小，并且要小得多。我很困惑为什么会这样，并且会认为它会缩放到相同的大小。有谁知道为什么不？

Answer 1

1. min-width 和 min-height 在这种情况下不起作用，只需使用 width 和 height 代替。

2. 如果您没有为 SVG 指定 height，浏览器将根据 width 和 viewBox 的纵横比为您计算一个。 width 默认为 "100%"，因此宽度将为父宽度 (270px) 的 100%，高度为：

   270 * 430.95 / 600 ~= 194px
   

3. 将 SVG 的高度设置为 "100%" 将使 SVG 的高度与 div.child 相同，但 preserveAspectRatio="xMidYMid meet" 将意味着 SVG 内容将以 div 为中心。

   .parent {
     position: relative;
     background: green;
     left: 50%;
     transform: translateX(-50%);
     display: inline-block;
     overflow: hidden;  
     height: 400px; 
     width: 270px;
   }
   
   .child {
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     height: 100%;
     width: 100%;
     transform: translate(-50%, -50%);
   }

   <div class="parent">
       <div class="child">
   
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewBox="246 0 600 430.95" preserveAspectRatio="xMidYMid meet" width="100%" height="100%">
   <rect width="846" height="100%" fill="red" />
   </svg>
   
    </div>
   </div>
   
      

   如果您希望 SVG 忽略纵横比，并拉伸到 div 的高度，则设置 preserveAspectRatio="none"。

.parent {
  position: relative;
  background: green;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow: hidden;  
  height: 400px; 
  width: 270px;
}

.child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
}

<div class="parent">
    <div class="child">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewBox="246 0 600 430.95" preserveAspectRatio="none" width="100%" height="100%">
<rect width="846" height="100%" fill="red" />
</svg>

 </div>
</div>

PS。没有像 viewPort 这样的 SVG 属性。