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

一个有问题的解决方案是暂时隐藏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>

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

1 个答案: