Определение размера SVG в ячейке таблицы HTML

Question

У меня есть HTML-таблица со встроенным SVG, охватывающим все строки. По умолчанию SVG принимает всю доступную ширину. Как я могу добиться следующего поведения?

• Высота таблицы должна быть рассчитана так, как если бы SVG не присутствовал.
• SVG должен занимать все доступное вертикальное пространство, сохраняя соотношение сторон.
• Остальная часть стола должна быть накрыта как обычно.

См. мой собственный ответ ниже , чтобы получить приблизительное представление о том, как он должен выглядеть.

<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.Я игнорирую такие вопросы, как padding и margin, но это должно дать вам представление о том, как должен выглядеть конечный результат.

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>