摘要：发现目前浏览器支持的挺强大的，但是本身有很多背景知识和元素属性以及库等，如何系统地掌握这一强大工具呢视窗和视野这两个词的翻译还是比较好的你站在屋子里通过窗户来看外面的世界。的坐标和的最左边的坐标对齐
viewPort(视窗)和viewBox(视野)最近做一个流程图绘制项目，所以研究了一下svg。发现svg目前浏览器支持的挺强大的，但是svg本身有很多背景知识和元素属性以及js库等，如何系统地掌握这一强大工具呢？
这两个词的翻译还是比较好的！你站在屋子里通过窗户来看外面的世界。窗户的大小是固定的，比如是400*200,可外面的世界是无限大的！那是不是你就只能看到窗户大小般的世界和井底之蛙一般呢？如果真是这样，那viewBox就没用了。想想看，如果你里窗户越远，是不是看到的越多呢？当你和窗户津贴成二维平面时，就真的是井底之蛙了。所以viewBox就很有意义了！
svg是html标签，类似于canvas，代表上面所说的viewPort.这里浏览器会渲染一块400*200的空白区域（窗户）。
我们发现上面的宽高属性没有单位，所以默认是px.所以我们应该看到的是一块100px*100px的绿色正方形
但是结果不是我们想要的
首先html width,height属性如果没有单位就是px,svg是400*200，没有问题。
但是里面的rect明明是100*100怎么就变成了200*200
结论
svg标签包裹的世界（代表是viewBox viewBox="0 0 200 50"）和外部html（代表是viewPort width="400" height="200" ）的世界不是一体的。
如果上面的svg元素没有viewBox和preserveAspectRatio属性，那viewPort和viewBox的单位像素是1：1的，我们通过改变viewBox属性，改变两个世界的单位像素比例.
两个世界(viewPort和viewBox)的单位像素怎么理解两个世界
demo: 1.html