Saya mempunyai jadual ringkas dengan SVG dalam sel jadual:
<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>
Seperti yang anda lihat, sel lain dalam baris mungkin terlalu panjang, sekali gus menyebabkan ketinggian baris berubah berbanding lalai, memperkenalkan jurang antara SVG dan sempadan atas dan bawahnya.
Bagaimana untuk membuat SVG secara automatik meregangkan atau mengecut untuk mengisi selnya secara menegak tanpa mengubah dimensi mendatarnya?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Satu penyelesaian adalah untuk menjadikannya imej latar belakang. Anda boleh meletakkan kod SVG ke dalam fail yang berasingan atau peratus mengekodkannya untuk digunakan dalam URI data.
<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>