缩放 SVG 以填充父 div/td答案

【问题标题】：Scale SVG to fill parent div/td缩放 SVG 以填充父 div/td
【发布时间】：2015-11-18 05:40:19
【问题描述】：

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

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

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

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

顺便说一句，SVG 在代码 sn-p 输出中的位置与将代码复制到文件中并运行它的位置不同。

【问题讨论】：

标签： html css svg

【解决方案1】：

默认情况下，元素显示为与文本基线对齐的内联元素。这会导致元素底部与其父元素底部之间存在少量空间。这个空间是为低于基线的文本字符保留的。

在您的示例中，您可以通过在元素上设置 display="block" 来解决您的问题。比如……

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

【讨论】：

我试过了，style='display: block;' 。都没有帮助。
您使用的是什么浏览器和设备？我在 Windows 笔记本电脑上的 IE11 和 Chrome 中进行了测试。我在设置和不设置显示属性的情况下进行了测试。我使用浏览器的开发工具来检查 svg、div 和 td 元素的布局大小。在不设置 display 属性的情况下，svg 元素的高度大约比 div 和 dt 的高度小 4 个像素。将 display 属性设置为“block”，svg 元素的高度等于 div 和 dt 的高度。
我在 Windows 上使用 Chrome。我看到 SVG 和 DIV 都是 70x70，但 TD 是 70x92。 DIV 以 TD 为中心。