SVG具有固定的高度和缩放宽度

Question

我目前在我的主页上有一个div，作为它的第一部分。它有background-image这是一个SVG文件。

我想要的是，缩放时背景不会垂直移动。它具有固定的高度，但水平缩放。

目前，我可以让它有两种不同的行为，也不是我想要的行为。

第一个gif最符合我的要求，为svg元素提供height属性并使用preserveAspectRatio=none，但内部的圆圈不会保留其宽高比。< / p>

第二个例子也可以工作，但是如果svg被剪切到div的底部而不是顶部。但我不知道如何使其“向上”而不是向下扩展。