J'ai un tableau simple avec SVG dans les cellules du tableau :
<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>
Comme vous pouvez le constater, d'autres cellules de la ligne peuvent être trop longues, entraînant ainsi une modification de la hauteur de la ligne par rapport à la valeur par défaut, introduisant un écart entre le SVG et ses bordures supérieure et inférieure.
Comment faire en sorte qu'un SVG s'étire ou se rétrécisse automatiquement pour remplir ses cellules verticalement sans modifier ses dimensions horizontales ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une solution consiste à en faire une image d’arrière-plan. Vous pouvez placer le code SVG dans un fichier séparé ou le encoder par pourcentage pour l'utiliser dans un URI de données.
<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>