資訊專欄INFORMATION COLUMN
摘要：發現目前瀏覽器支持的挺強大的，但是本身有很多背景知識和元素屬性以及庫等，如何系統地掌握這一強大工具呢視窗和視野這兩個詞的翻譯還是比較好的你站在屋子里通過窗戶來看外面的世界。的坐標和的最左邊的坐標對齊
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