SVG图标跑到哪里了？

先上图，这是我们想要实现的图标效果：

（为了方便看出svg图标的轮廓，我们将背景上色。）
此时我们使用<svg>包裹描绘图标路径的<path>代码段,如图：

但我们运行之后得到的结果却是这样的：

很明显，图标过大，已经超出了svg的viewport所能显示的范围，那么这时我们怎么办呢？
聪明的同学可能已经想到了，就是使用svg的viewBox属性，我们先来看MDN对该属性的定义：

The viewBox attribute defines the position and dimension

什么意思呢？其实就只有两个关键字： position：位置，以及dimension：尺寸。
也就是说viewBox划定了viewport应该显示的图像区域的起点位置（以viewBox左上角为图像起点）和大小，所以它包含四个数字类型参数，viewBox="min-x min-y w h"分别代表viewBox盒子左上角的坐标（min-x min-y）和它的宽度和高度（w h）。
这时，我们依据<path>路径实际的尺寸，将viewBox设置之后如图：

此时我们再来看看改代码下的结果：

与预期完全一致，完美解决！

结语

通过这个小情境，实战了svg的viewBox属性的知识点，以更灵活运用，深入理解。