我很难理解svg的viewbox="0 0 100 100"的第三和第四数字如何控制“缩放”。到目前为止，在我从Internet上看到的所有教程中，所有示例都演示了(svg-viewport-width/svg-viewbox-3rd-number) == (svg-viewport-height/svg-viewbox-4th-number)的情况。然后示例说这类似于缩放。
我的问题是，当(svg-viewport-width/svg-viewbox-3rd-number) != (svg-viewport-height/svg-viewbox-4th-number)时，我不了解如何预测行为。而且我还没有为此找到很好的解释。
如果viewBox的第3和第4个数字确实用于缩放，那么我的问题是为什么需要两个数字？在大多数应用中，缩放是作为单个数字提供的。人们会要求“我想放大15％”或“将放大倍数提高100倍”。这使我相信第3和第4个数字实际上并不是仅用于缩放。
任何人都可以帮助我更好地了解如何使用viewBox的第3和第4个数字吗？
SVG视图框中的四个数字分别是x，y，宽度和高度。它为您的SVG建立单位系统。当您将viewBox的宽度和高度分别减半并将其减半时，在400 x 400像素SVG中以50,50绘制的100 x 50矩形会发生什么。
<svg width="400px" height="400px" viewBox="0 0 400 400">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />
<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>“等一下，您可能会想，“当我仅更改宽度或高度之一时，为什么将viewBox的尺寸减半却不能拉伸形状的宽度或高度？这没有意义。 。”实际上，您是对的。 SVG元素中有一个无声默认值，当viewBox更改时，它会保留形状的长宽比。
如果您通过在[SVG]中添加preserveAspectRatio="none"来覆盖此默认值-动画的行为符合您的预期-当分别更改宽度和高度时，分别拉伸形状的x和y尺寸。
<svg width="400px" height="400px" viewBox="0 0 400 400" preserveAspectRatio="none">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />
<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>