如何让SVG垂直拉伸填满表格单元格且不改变水平尺寸？

问题代码 #

<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>

上述代码中，右侧单元格内容换行导致行高增加时，SVG与单元格上下边框会出现间隙，需要让SVG自动垂直伸缩填满单元格，同时保持水平尺寸固定。

解决方案 #

调整SVG的样式，添加height: 100%和display: block属性即可实现需求，修改后的代码如下：

<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em; height: 100%; display: block;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>

关键修改说明 #

• height: 100%：让SVG的高度继承所在单元格的高度，实现垂直方向完全填满单元格。
• display: block：将SVG从默认的inline元素改为块级元素，消除inline元素自带的行高间隙，确保SVG完全贴合单元格边框。
• 保留preserveAspectRatio="none"：允许SVG不保持原始宽高比，这样垂直拉伸时不会挤压水平尺寸，保证设置的width: 1.37em始终生效。

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