剖析svg中的viewbox属性，轻松理解图形缩放原理

svg中有一个viewbox属性，中文翻译为视区，就是从svg上截取一小块，放大到整个svg显示。乍一看，这个属性有些难以理解，但一个简单的例子就能让您茅塞顿开。

我们先来看一个最简单的svg图形：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
</svg>

这个图形是一个红色的圆形，半径为40，位于svg画布的中心。

现在，我们来添加一个viewbox属性：

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
</svg>

viewBox属性中的四个数字分别是：x、y、width和height。它们表示viewbox的左上角坐标和宽高。在本例中，viewbox的坐标为（0, 0），宽高均为100。这意味着viewBox将从svg画布的左上角截取一个100 x 100的区域，然后将其放大到整个svg画布显示。

因此，您现在看到的图形仍然是一个红色的圆形，但它占据了整个svg画布。

viewBox属性还有一个重要的作用，就是可以控制图形的缩放比例。例如，如果我们把viewBox的width和height都改为200，那么图形就会放大一倍：

<svg width="100" height="100" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
</svg>

您现在看到的图形是一个红色的圆形，占据了整个svg画布，并且比之前大了两倍。

viewBox属性还可以用来创建响应式图形。例如，我们可以创建一个可以在不同尺寸的设备上显示的svg图形：

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
</svg>

在这个例子中，svg图形的宽度和高度都设置为100%，这意味着它可以在任何设备上显示，并且始终占据整个容器。

viewBox属性是一个非常强大的工具，可以用来创建各种各样的svg图形。希望本文能帮助您更好地理解viewBox的用法。