Html SVG大小与父容器相比。为什么'；t 100%最小高度填充父级？

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

.parent{
位置：相对位置；
背景：绿色；
左：50%；
转化：translateX（-50%）；
显示：内联块；
溢出：隐藏；
高度：400px；
宽度：270px；
}
.孩子{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
最小高度：100%；
最小宽度：100%；
转换：翻译（-50%，-50%）；
}

minwidth

和

minheight

在这种情况下不起作用，只需使用

width

和

height

如果未为SVG指定

高度

，浏览器将根据

宽度

和

视图框的纵横比为您计算一个高度。
宽度
默认为
“100%”
，因此宽度将为父级宽度（270px）的100%，高度将为：

270 * 430.95 / 600 ~= 194px

将SVG的高度设置为

“100%”

将使SVG的高度与

div.child

相同，但

保留aspectratio=“xMidYMid meet”

将意味着SVG内容将集中在

div

中

.parent{
位置：相对位置；
背景：绿色；
左：50%；
转化：translateX（-50%）；
显示：内联块；
溢出：隐藏；
高度：400px；
宽度：270px；
}
.孩子{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
身高：100%；
宽度：100%；
转换：翻译（-50%，-50%）；
}

您好，谢谢您的回复！我确实希望保留SVG的外观。但是，在您的示例中，SVG的纵横比发生了变化，即使您使用了preserveSpectratio=“xMidYMid-meet”。当我单独查看SVG时，它是一个在垂直轴上有长边的矩形，但在您的第一个代码片段中，矩形是另一个方向，长边在X轴上。另外，“846”值来自您在第一个代码段中使用的SVG中的什么地方？我希望整个SVG视图框以红色显示，因此我选择了100%的高度和宽度作为红色矩形。如果您希望保留纵横比，那么在不切断部分SVG的情况下，无法使用短的宽SVG填充高的窄div。如果您对此没有意见，请使用

preserveAspectRatio=“xMidYMid-slice”

。846来自

viewBox.x+viewBox.width=（246+600）

。