上图第一张，这是我们要实现的图标效果：（为了方便看清svg图标的轮廓，我们给背景上色。）此时我们用包裹描绘图标路径部分的代码，如图：但是我们运行后得到的结果是这样的：很明显，图标太大了，已经超出了svg视口可以显示的范围，那么我们应该怎么办呢？这次？聪明的同学可能已经想到了，那就是利用svg的viewBox属性。我们先看一下MDN上对这个属性的定义：TheviewBoxattributedefinesthepositionanddimension是什么意思？其实只有两个关键字：position：位置，维度：size。也就是说，viewBox定义了viewport要显示的图像区域的起始位置和大小（以viewBox的左上角为图像的起始点）和大小，所以它包含四个数值参数，viewBox="min-xmin-ywh"分别表示viewBox框的左上角坐标(min-xmin-y)及其宽高(wh)。这时候我们根据路径的实际大小，设置viewBox如图：这时我们来看一下改代码的结果：果然不出所料，完美解决！结语通过这个小情境，对svg的viewBox属性的知识点进行了实践，从而更加灵活深入的理解。
SVG图标去哪儿了？相关文章
