html - 如何在 HTML 表格中放大我的 SVG？

Question

我正在尝试使用 HTML 创建一个表格，该表格的一侧有一个图像，rowspan 为 10，另一侧有 10 行文本。

表格在这里 - https://ffe-dev.flowersforeveryone.co.za/

我的图像是一个透明的 SVG，我正试图让它变大以适合整个 td 单元格。

HTML 代码在这里 -

<table class="table_seapoint" border = "1">
<tbody>
<tr>
<td rowspan="10">
    <img class="alignnone size-full wp-image-4634" style="display:block;" width = "400" height = "400" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/10/smile_cape_town.svg" alt="Sea Point Flowers">
</td>

<td rowspan="10" width="60px"> </td>
<td colspan="4">
<h1 style="font-weight:lighter;font-size:28px; line-height:115%; padding-bottom: 28px;">stunning luxury flower bouquets
<br>freshly cut and hand-delivered in <br>sea point and across the western cape</h1>
</td>
</tr>


<tr>
<td><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flowers Sea Point" width="56" height="56"></td>
<td style="padding-left: 10px;" colspan="3">
<h2 style="font-weight:lighter;font-size:22px;line-height:90%">best price promise</h2>
</td>
</tr>.............

我将宽度和高度设置为 400，并且我正在使用以下 CSS，这似乎使整个表格的大小正确 -

        table.table_seapoint img {
        max-width: 400px;
        max-height: 400px;
    margin-top: -15px;
    margin-bottom: -15px;
        margin-right: -5px;
        margin-left: -10px;
}

我想让笑脸变大，但无论我做什么，我都无法在不弄乱整个表格的情况下使 svg 变大。有人可以告诉我该怎么做吗？我想我需要以某种方式放大它？

Answer 1

我认为您应该剪切图像的边缘(在 Adob​​e Illustrator 中，或在免费的在线工具中)，因为它周围有空白/透明空间。