Css SVG缩放添加空白/填充，而不是调整整个元素的大小

我试图根据用户的视口宽度缩放SVG

我有这个css：

.thesvg {

padding: 0;
line-height: 0;
margin: 0;
width: 50%;
max-width: 360px;

}

它在水平方向上按应有的比例缩放，并保持外观

但它在顶部/底部添加空白/填充（并保持原始元素高度），而不是完全缩小比例

但仅在某些浏览器中。。或者我也这么认为（可能是因为不同的视口大小）

---

这是虫子吗？或者，我如何通过管理宽度（如果可能的话）来解决这个问题并实现完美流畅的SVG呢？

也许我需要将其包装在一个分区中可能您应该查看

viewBox

属性。。。还是这个-