共计 525 个字符，预计需要花费 2 分钟才能阅读完成。
先上图，这是我们想要实现的图标效果：（为了方便看出 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 属性的知识点，以更灵活运用，深入理解。
正文完
