html - 在 HTML 表格单元格中调整 SVG 的大小

Question

我有一个 HTML 表格，其中包含一个跨越所有行的内联 SVG。默认情况下，SVG 占据所有可用宽度。我怎样才能实现以下行为？

• 应该计算表格的高度，就好像 SVG 不存在一样。
• SVG 应占用所有可用的垂直空间，并保持宽高比。
• 表格的其余部分应照常布置。

参见 my own answer below粗略估计它应该是什么样子。

<table>
  <tr>
    <td id="svg-cell" rowspan="4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40">
        <circle cx="10" cy="10" r="10" />
      </svg>
    </td>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
  </tr>
</table>

Answer 1

一个 hacky 解决方案是暂时隐藏 SVG 并使用 JavaScript 设置它的大小。我忽略了填充和边距等问题，但它应该让您了解最终结果应该是什么样子。

window.onload = function() {
  document.getElementById("svg").style.height = document.getElementById("table").getElementsByTagName('tbody')[0].clientHeight + "px";
  document.getElementById("svg").style.display = "inline";
}

#svg {
  display: none;
}

<table id="table">
  <tr>
    <td id="svg-cell" rowspan="4">
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40">
        <circle cx="10" cy="10" r="10" />
      </svg>
    </td>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
  </tr>
</table>