Bootstrap 4 SVG-如何通过屏幕底部限制缩放

Question

我在布局中有一个SVG。该项目使用Vue.js和bootstrap4。

工作示例： https://codesandbox.io/embed/vue-template-7s5cv

svg与右列中可用空间的宽度可以很好地缩放。

问题： 我希望SVG始终显示完整，因此，例如，如果可用的屏幕比高的要宽得多，就不要伸出底部的屏幕。

示例：

目标：相反，SVG应该按比例缩小，使其适合位于父div中心的可用屏幕。 SVG不应与底部的可用空间重叠。

这有可能吗？

一个具有相同codeandbox代码的工作示例将不胜感激。

感谢您的帮助！