关于SVG的viewBox

为什么80%的码农都做不了架构师？>>>   

关于viewBox的意思在网上找了好多，均不得其解，后自己测试，得出如下结论：
<svg width="1000" height="1000" viewBox="100 100 400 400"> 
上面这个svg标签的意思是，svg宽为1000，高为1000，viewBox里的4个数字的意思是：把svg的左上角100，100和右下角400，400区域内的图像放入1000，1000内，
也就是把本来宽为400-100=300，高为400-100=300的长方形，放入宽高均为1000的长方形内，也就是说等比例的把高宽为300的放大为高宽为1000的图像。

viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的，你甚至可以在这个坐标系统的边界之外的地方绘制图形；但是这些相对于SVG视窗定位的图形，也可以由用户坐标系的位置来控制。

viewBox属性使用四个参数来指定坐标系原点的位置以及它的尺寸：x y width height。初始情况下，这个坐标系等同于初始化的视窗坐标系（由SVG图像的width和height确定），而且它的原点是在(0, 0)——即SVG的左上角。

通过改变x和y这两个参数的值，可以调整原点的位置。改变width和height的值，可以改变坐标系统的尺寸。只使用viewBox属性，就可以帮你扩展或裁剪SVG画布。跟着示例一起阅读。

重要提示：在本文章中，我不会改变viewBox在SVG视窗内的默认行为（比例和位置）。因为，根据属性的默认行为，viewBox的内容会被尽可能地完全包含在视窗内，然后放置在中心位置。不过，使用preserveAspectratio属性可以让你自由地改变viewBox的尺寸和位置，但是在这篇文章中，这不是必需的技术，所以我们也不会在这里深入讲解。
使用viewBox裁剪SVG，即使用viewBox属性制作Art Direction的SVG

前阵子，我的一个客户要求把他网站的SVG头像按照不同的屏幕尺寸设置成不同的大小，从而使得它只有一小部分是在小屏幕上可见的，在中等的屏幕尺寸上可以看到再大一点的部分，然后在大屏幕上可以看到完整的内容。当时我脑子里首先出现的想法就是，他的要求其实是使用viewBox属性来裁剪SVG图像，然后根据不同的屏幕尺寸，显示他想要看到的图像的某部分。

通过改变SVG坐标系统的尺寸和原点位置，我们可以把SVG进行裁剪，并显示我们希望在视窗中显示的那部分内容。

转载于:https://my.oschina.net/dawd/blog/876724