基本语法首先，我在一个400x400大小的canvas中画了一个200x200的矩形：可以找到，没有问题。现在，在我更改svg的宽度和高度之后：如您所见，它按比例变小了。简单的理解就是：viewBox调节画布的大小，根据画布的大小绘制svg标签中的内容。绘制完成后，得到一张图片。页面显示时，svg的宽高指定图片显示多大。偏移如果viewBox规范的画布不是从0,0开始怎么办？参考下图理解：画布起点为100,100，宽高分别为300,300。因此，画布的实际大小为400x400，在画布上绘制的结果是一个居中的红色矩形，大小为200x200：显示时，我们需要显示的是画布起点100,100，大小为300x300，也就是上图中高亮显示的位置。不成比例那么还有一个问题：如果canvas的大小和最终图片显示的svg的大小不成比例怎么办？可以发现没有变形，而是矩阵显示，处理方式和背景图类似。具体来说，涉及到一个新的属性：preserveAspectRatio。preserveAspectRatio我们调整上面的例子：其实如果不写preserveAspectRatio，有一个默认值：“xMidYMidmeet”。与默认值相比，我们只是将meet改为slice。总之，preserveAspectRatio的值由两个参数组成。第一个参数的可选值有：xMinYMin、xMinYMid、xMinYMax、xMidYMin、xMidYMid、xMidYMax、xMaxYMin、xMaxYMid和xMaxYMax。x、y表示对齐的轴，min、mid、max表示对齐的方式。min沿小坐标方向对齐；mid居中对齐；max沿大坐标方向对齐。第二个参数的可选值有：meet和slice。Meet是之前自动调整viewBox完全显示在svg画布中的方法，类似于css中的background-size:contain；而slice会自动调整viewBox以填充整个svg画布，非常类似于background-size:cover。
