svg viewbox缩放问题

Question

我对svg的viewbox有一个问题，在我看来，它就像是无限svg平面上的一个窗口，它的边界是在svg元素的viewBox属性中设置的。它表示svg平面中两个坐标之间的矩形。因此，viewBox "0 0 1000 500“显示了svg plan的(0,0)和(1000,500)之间的窗口。当我创建viewBox (2000，0,3000 500)时，我会看到(2000,0)和(3000,500)的窗口。X和y缩放没有修改:在这两种情况下，我都显示了svg平面的1000 * 500个单位。

但很明显，我在某些地方犯了错。我正在尝试动画viewbox来模拟某种类型的滚动条显示，保持y坐标不变，但更改x坐标(不更改实际显示的单位数)，但这是错误的。不知何故，我的y缩放发生了变化。在现代浏览器中，您可以验证yourself (拖动滑块以更改viewBox)。我在SVG规范中遗漏了什么？

Answer 1

您在SVG规范中遗漏了preserveAspectRatio属性。默认情况下，它会强制保留您在viewbox中看到的内容的纵横比。听起来你想要的是preserveAspectRatio="none“