recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment étendre un SVG verticalement jusqu'à une cellule d'un tableau ?

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 ?

P粉521697419P粉521697419443 Il y a quelques jours489

répondre à tous(1)je répondrai

  • P粉952365143

    P粉9523651432023-09-08 10:12:23

    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>

    répondre
    0
  • Annulerrépondre