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

min-width和min-height在这种情况下不起作用，请改用width和height。
如果您未为SVG指定height，则浏览器将根据width和viewBox的宽高比为您计算一个。 width默认为"100%"，因此宽度为父级宽度（270px）的100％，高度为：
```
270 * 430.95 / 600 ~= 194px
```

将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属性。

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

1 个答案: