viewBox详解：
svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
我们可以通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”
当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。
当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
示例代码
<svg width="150" height="150" viewBox="0 0 3000 3000" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
<svg width="150" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>