Question

我希望SVG完全适合包含TD。 SVG的比例不必保留。相反，当高度应该大于它的宽度时，SVG的高度与其宽度相同。 SVG下方和上方有填充。这就是我所拥有的：

＆＃13;

<html>
<head>
  <style>
table {
  border-collapse:collapse;
}

.td-svg {
  padding: 0px;
  display: block;
}

.div-svg {
  height: 100%;
  display: block;
}
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td class='td-svg'>
        <div class='div-svg'>
          <svg viewBox='0 0 100 100' preserveAspectRatio="none"></svg></div></td>
      <td>col 2</td>
      <td>col 3<br/>continued<br/>continued<br/>continued<br/>continued</td>
    </tr>
  </table>
    
</body>
</html>

＆＃13;

我认为SVG没有填满整个单元格的原因是因为DIV没有填充父TD，但如果我删除DIV，我会得到相同的结果。

似乎正在发生的事情是浏览器正在将SVG缩放为与viewBox维度成比例。现在在上面的代码中，SVG元素是70x70。如果将viewBox更改为viewBox='0 0 100 50'，则SVG元素为70x35。 TD是70x92，所以我希望SVG也是70x92。

顺便说一下，如果将代码复制到文件并运行它，SVG在代码片段输出中的位置会有所不同。

Answer 1

默认情况下，元素显示为与文本基线对齐的内联元素。这导致元素底部与其父元素底部之间的空间很小。此空间保留用于下降到基线以下的文本字符。

在您的示例中，您可以通过设置display =＆＃34; block＆＃34;来解决您的问题。在元素上。例如......

<svg viewBox='0 0 100 100' display="block" preserveAspectRatio="none"></svg>

缩放SVG以填充父div / td

1 个答案: