svg viewBox 的最后两个数字是做什么用的？如果是为了缩放效果，为什么不使用 1 个数字？

Question

我很难理解 svg viewbox="0 0 100 100" 的第三个和第四个数字如何控制 "zoom"。到目前为止，在我从 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个数字确实是用来缩放的，那么我的问题是为什么需要两个数字？在大多数应用程序中，缩放以单个数字的形式提供。人们会要求，"I would like to zoom in 15%" 或 "increase magnification by 100x"。这让我相信第 3 和第 4 个数字实际上并不只是用于缩放。

谁能帮助我更好地理解如何使用 viewBox 的第 3 和第 4 个数字？

Answer 1

SVG viewbox中的四个数字是x,y,width和height。它为您的 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>

"Wait a minute"，您可能会想，"why does halving the size of my viewBox not stretch the width or height of my shape when I'm only changing one of the width or the height? That doesn't make sense." 事实上，您是对的。您的 SVG 元素中有一个静默默认值，可在 viewBox 更改时保留形状的纵横比。

如果您通过将 preserveAspectRatio="none" 添加到您的 SVG 来覆盖此默认值 - 动画的行为与您预期的一样 - 当您分别更改宽度和高度时，分别拉伸形状的 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>

svg viewBox 的最后两个数字是做什么用的？如果是为了缩放效果，为什么不使用 1 个数字？

What are the last 2 numbers of svg viewBox used for? if it is for zoom effect, why not use 1 number?

svg

viewbox