将内联svg缩放到div高度

Question

我试图将内联svg缩放到另一个div的高度，并使用宽度比例来保持svg的比例（仅使用css）。我最接近的是this（也在下面），使用表并使用在Firefox中失败的garbage hack将svg扩展到tr的高度。不幸的是，它也无法解决任何浏览器中的原始问题，因为div似乎没有调整到svg的宽度。有没有办法做到这一点？ （我非常乐意离开桌子方法）

这是上面提到的尝试

＆＃13;

＆＃13;

.scale {
  height: 1px;
}
.scale > div {
  height: 100%;
}
.scale svg {
  height: 100%;
}
.scale svg > rect {
  fill: lightblue;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td class="scale">
        <div>
          <svg viewbox="0 0 10 10">
            <rect x="0" y="0" width="10" height="10" color="blue"></rect>
          </svg>
        </div>
      </td>
      <td>
        1
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;