简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何讓 SVG 垂直拉伸到表格單元格？
P粉521697419
P粉521697419 2023-09-07 15:15:17
0
1
425

我有一個簡單的表格，其表格單元格中包含 SVG：

<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>

如您所見，行中的其他單元格可能太長，因此會導致行高相對於預設值發生變化，從而在 SVG 及其上下邊界之間引入間隙。

如何讓 SVG 自動拉伸或收縮以垂直填充其單元格，而不更改其水平尺寸？

P粉521697419
P粉521697419

全部回覆(1)
P粉952365143
P粉9523651432023-09-08 10:12:23 1樓

一種解決方案是將其設為背景圖像。您可以將 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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！