之前一直没有深入学习过svg这方面的知识，现在项目上要用到了，开始提前学习一波svg相关的知识。
理解svg的viewbox属性的作用时，着实废了我的一些脑细胞，在这里记录一篇关于viewbox学习笔记，将自己对于viewbox属性的理解输出出来。
svg简单理解
废话少说，下面是根据我个人的理解，对svg的总结：
-
定义一个svg标签，相当于定义一块画布(可视区域)，在画布内绘制图像。
-
每个被定义的画布(svg标签)，都有一个坐标系，一般以画布的左上角为顶点，向右延伸为X轴方向，向下延伸为Y轴方向。
-
当svg标签内部定义的元素坐标为负值时，不会在画布上显示。
-
可以使用任何文本编辑器和绘图软件来创建和编辑svg。
-
svg 全称为可缩放矢量图形(Scalable Vector Graphics) ,三个英文单词的首字母缩写，用来描述二维的矢量图形。
-
它是一个标记语言，不过是基于XML 的标记语言，而不是HTML。
-
因为是矢量图形，所以放大缩小 时不会失真也不会被降低质量 ，这是它与传统的点阵图像模式(PNG、JPEG)不同之处。
-
svg和CSS、DOM、JavaScript等其他网络标准可以无缝衔接。
利用svg标签定义一个画布，宽高为200*200，在画布上绘制一个圆,坐标为(100, 100)，半径为50。
html
<svg width="200" height="200" class="svg-box">
<circle cx="100" cy="100" r="50" fill="white" ></circle>
</svg>
// 1. circle属于svg内的一个元素，用于绘制圆形图案。
// 2. cx、cy为所绘制圆形的圆心坐标(100, 100)，r为所绘制圆形的半径长度50。
// 3. fill为填充属性，上面代码表示在绘制圆形图案时将其颜色填充为白色。
// 4. svg标签上有width、height两个属性，用来定义svg标签可视区域的大小，即画布大小。注意： svg标签上width、height两个属性的单位可以使用其它类型的单位，例如：em、ex、px、pt、%、pc等等。
如果单位是纯数字，那么使用的就是"像素"作为单位。
效果图
- 改变圆心坐标为(50, 50)，此时绘制的圆形与画布的两条边会相切。效果如下：
- 改变圆心坐标为(0, 0)，此时圆心和坐标系顶点相同，效果如下：
- 改变圆心坐标为(-50, -50)，圆形已经不会出现在画布上了，超出坐标系后，会被隐藏。效果如下：
OK，到这里算是对svg已经有一丢丢的了解，接下来再看下svg里面很重要的一个属性。
svg的viewbox属性
viewbox属性的值是一个包含4个参数的列表，分别是min-x、min-y、width、height，以空格或者逗号分隔开。
| 参数 | 说明 |
|---|---|
| min-x | 相对于svg左上角(画布顶点 )的横坐标 |
| min-y | 相对于svg左上角(画布顶点 )的纵坐标 |
| width | 表示要截取的viewbox的宽度 |
| height | 表示要截取的viewbox的高度 |
我个人对viewbox属性的理解：
-
viewbox是一个矩形盒子，根据min-x，min-y，width，height四个参数在画布上截取一个矩形图像。
-
然后将截取出来的图像根据画布大小(svg的宽高)自适应调整图像大小。
- 比如：当被截取出来的图像的宽，与画布的宽度(svg的width)相等时，整个图像就停止自适应了，此时如果图像高度大于画布的高度，那么超出画布的部分就会被裁剪掉。同理，被截取出来的图像的高度也是一样的道理。
-
当被截取图像的尺寸大于画布的大小时，为了将自己完全放入画布内，viewbox就会缩小，这时我们看到的图像是变小了。
-
当截取图像的尺寸小于画布的大小时，为了将自己完全放入画布内，viewbox就会放大，这时我们看到的图像是变大了，有的时候图像甚至会被裁剪掉。
接下来看看代码示例：
- viewbox截取图像的尺寸与画布大小相等时
代码示例：
html
<svg width="200" height="200" class="svg-box" viewbox="0 0 200 200">
<circle cx="100" cy="100" r="50" fill="white" ></circle>
</svg>效果图：
2. viewbox截取图像的尺寸是画布大小的一半时，viewbox="0 0 100 100"
代码示例：
html
<svg width="200" height="200" class="svg-box" viewbox="0 0 100 100">
<circle cx="100" cy="100" r="50" fill="white" ></circle>
</svg>效果图： 
原理效果图：
- viewbox截取图像的尺寸是画布的一倍时，viewbox="0 0 400 400"
代码示例：
html
<svg width="200" height="200" class="svg-box" viewbox="0 0 400 400">
<circle cx="100" cy="100" r="50" fill="white" ></circle>
</svg>效果图： 
原理效果图： 
关于viewbox属性的理解就这些了，还有关于preserveAspectRatio属性的知识点后面再记录~
总结
我是学明白了，不知道掘友们看明白没有？挠头。