我有一个简单的表格，其表格单元格中包含 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 代码放入单独的文件中，也可以对其进行百分比编码在数据 URI 中使用。
<table style="width: 8em;"> <tr> <td style="border: 1px solid black; width: 1.37em; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Cpolyline points=%220,0 1,0.5 0,1%22 style=%22fill: blue;%22%3E%3C/polyline%3E%3C/svg%3E');"></td> <td style="border: 1px solid black;">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td> </tr> </table>