svg缩放viewBox

svg缩放使用起来十分简单，相比于canvas的好处多了不是一点半点，canvas的缩放需要清除画图，等比例缩放，然后绘制，svg直接一句代码viewBox就可以实现。

viewBox是<svg>元素的属性。 它的值是四个数字的列表，用空格或逗号分隔：x，y，宽度，高度。 宽度是SVG代码中以用户坐标/ px为单位的宽度，应缩放以填充绘制SVG的区域的宽度（SVG语言中的视口 ）。 同样，高度是应该缩放以填充可用高度的px /坐标数。 即使您的SVG代码使用其他单位，例如英寸或厘米，它们也将被缩放以匹配viewBox创建的整体比例。

• viewBox="0 0 100 100" ：定义一个坐标系，其宽度为100个单位，高度为100个单位。 换句话说，如果SVG包含一个以图形为中心且半径为50px的圆，则即使该图片以全屏显示，它也会填满SVG图像的高度或宽度。 如果您的SVG包含一个height="1in"的矩形，它也会几乎填满整个屏幕，因为CSS中1英寸= 96像素，所有长度都将按比例缩放。

是不是云里雾里？我当初看到这句话的时候也是有点懵逼，简单来说：

首先你需要画一个图画，比如说宽为1050，高为350的svg画：

 

 

第二步设置  为  viewBox="0 0 1050 350"，这是为了给现在的画图等比例为1，

第三部你想修改svg大小   设置成  width="525" height="175"，你会发现svg等比例缩小了一半

用的时候直接按照我的三步来就可以，直接替换里面的数字