Ich habe eine einfache Tabelle mit SVG in den Tabellenzellen:
<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>
Wie Sie sehen, sind andere Zellen in der Zeile möglicherweise zu lang, was dazu führt, dass sich die Zeilenhöhe im Vergleich zum Standardwert ändert und eine Lücke zwischen der SVG-Datei und ihren oberen und unteren Rändern entsteht.
Wie lässt sich eine SVG-Datei automatisch strecken oder verkleinern, um ihre Zellen vertikal zu füllen, ohne ihre horizontalen Abmessungen zu ändern?
一种解决方案是将其设为背景图像。您可以将 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>