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

Question

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

我有这个css：

.thesvg {

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

}

它应该水平缩放，并保持方面

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

但仅限于某些浏览器......或者我认为（可能是因为视口大小不同）

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