简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment étendre un SVG verticalement jusqu'à une cellule d'un tableau ?
P粉521697419
P粉521697419 2023-09-07 15:15:17
0
1
426

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粉521697419
P粉521697419

répondre à tous(1)
P粉952365143
P粉9523651432023-09-08 10:12:23 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！