将SVG高度设置为100%时导致div容器溢出的原因是什么？

SVG默认是行内替换元素，默认vertical-align属性值为baseline，浏览器会为行内元素在基线下方预留容纳字母下行部分（如p、g、j这类字符向下延伸区域）的间隙，这部分间隙就是设置height: 100%时产生溢出的原因，与盒模型边距、内边距设置无关。
将高度设为99%时，刚好让出了预留间隙的高度，因此不会出现溢出，但这属于巧合的临时规避方案，没有解决根本问题。

任选以下一种方式即可彻底解决溢出问题，不需要手动压缩SVG高度：

• 给SVG设置display: block，将其转换为块级元素，脱离行内布局规则，不会产生基线预留间隙
• 给SVG设置vertical-align属性值为top/middle/bottom，只要不使用默认值baseline，就不会生成底部间隙
• 给父容器设置font-size: 0，清除行内文本对应的行高基线间隙，该方案可读性较差，优先选择前两种

CSS 代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

svg {
    width: 100%;
    height: 100%;
    /* 启用下面任意一行即可修复溢出 */
    display: block;
    /* vertical-align: bottom; */
}

#chart-area {
    background-color: aliceblue;
    width: 100vw;
    height: 100vh;
}

注意：原代码直接对所有div标签设置宽高的写法会影响页面其他div元素，建议直接对目标容器#chart-area设置样式，降低样式污染风险。

HTML 代码 #

<div id="chart-area">
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
    </svg>
</div>

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