为什么在缩小视图框时，我的SVG会变大？

Question

我有这个小提琴：https://jsfiddle.net/thatOneGuy/akcp8z7w/

我有一个带有以下属性的SVG图标：

x="0px" y="0px" viewBox="0 0 24 24"

此图标位于页面的中央。但是，当我使视图框变小时：

viewBox="0 0 12 12"

相应的小提琴：https://jsfiddle.net/thatOneGuy/akcp8z7w/1/

它使图标更大。为什么：

Answer 1

完全正常。我会尝试说明它（仅使用宽度）

让我们假设你有（viewBox 0-24，width = 100）

| - A B - | - C D - | - E F - | - G H - |
0         6        12        18        24

当你限制（viewBox 0-12，width：100（不变））时，它看起来更大，你得到：

|   -   A   B   -   |   -   C   D   -   |
0                   6                  12

限制时（viewBox：0-12，宽度：50），你得到：

| - A B - | - C D - |
0         6        12

这可以看作是剪辑：

如果你不希望它看起来更大，你应该指出你的盒子的宽度。如果您希望显示的内容减少2倍，则应指明宽度减小2倍。

最后您需要了解的是：

• SVG是2D空间中的一组点
• viewBox属性是最小/最大显示坐标的坐标

另一方面：

• 您可以在指定宽度/高度时为此矩形（viewBox）指定所需的大小。

如果没有指定任何内容，您将获得默认宽度，显示的越少，显示的越大（填充所有可用空间）。