資訊專欄INFORMATION COLUMN
摘要：發(fā)現(xiàn)目前瀏覽器支持的挺強(qiáng)大的，但是本身有很多背景知識(shí)和元素屬性以及庫(kù)等，如何系統(tǒng)地掌握這一強(qiáng)大工具呢視窗和視野這兩個(gè)詞的翻譯還是比較好的你站在屋子里通過(guò)窗戶來(lái)看外面的世界。的坐標(biāo)和的最左邊的坐標(biāo)對(duì)齊
viewPort(視窗)和viewBox(視野)最近做一個(gè)流程圖繪制項(xiàng)目，所以研究了一下svg。發(fā)現(xiàn)svg目前瀏覽器支持的挺強(qiáng)大的，但是svg本身有很多背景知識(shí)和元素屬性以及js庫(kù)等，如何系統(tǒng)地掌握這一強(qiáng)大工具呢？
這兩個(gè)詞的翻譯還是比較好的！你站在屋子里通過(guò)窗戶來(lái)看外面的世界。窗戶的大小是固定的，比如是400*200,可外面的世界是無(wú)限大的！那是不是你就只能看到窗戶大小般的世界和井底之蛙一般呢？如果真是這樣，那viewBox就沒(méi)用了。想想看，如果你里窗戶越遠(yuǎn)，是不是看到的越多呢？當(dāng)你和窗戶津貼成二維平面時(shí)，就真的是井底之蛙了。所以viewBox就很有意義了！
svg是html標(biāo)簽，類似于canvas，代表上面所說(shuō)的viewPort.這里瀏覽器會(huì)渲染一塊400*200的空白區(qū)域（窗戶）。
我們發(fā)現(xiàn)上面的寬高屬性沒(méi)有單位，所以默認(rèn)是px.所以我們應(yīng)該看到的是一塊100px*100px的綠色正方形
但是結(jié)果不是我們想要的
首先html width,height屬性如果沒(méi)有單位就是px,svg是400*200，沒(méi)有問(wèn)題。
但是里面的rect明明是100*100怎么就變成了200*200
結(jié)論
svg標(biāo)簽包裹的世界（代表是viewBox viewBox="0 0 200 50"）和外部html（代表是viewPort width="400" height="200" ）的世界不是一體的。
如果上面的svg元素沒(méi)有viewBox和preserveAspectRatio屬性，那viewPort和viewBox的單位像素是1：1的，我們通過(guò)改變viewBox屬性，改變兩個(gè)世界的單位像素比例.
兩個(gè)世界(viewPort和viewBox)的單位像素怎么理解兩個(gè)世界
demo: 1.html