我有一個簡單的表格，其表格單元格中包含 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>