理解SVG的viewport,viewBox【1】

viewport表示的是svg可視區大小，具體體現就是svg元素的width和height屬性值所圈起來的區域：

<svg width="400" height="300" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

上述svg代碼便定義了一個400px*300px的viewpoint，默認單位是px，也能夠是其餘web單位。上述代碼的效果是：

在一個400px*300px的舞臺上的(10,5)座標位置放了一個20px*15px的矩形。顯示效果全在乎料之中，可是，若是svg增長新的屬性viewBox，狀況就大不相同了，代碼：

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

效果：

只是在svg標籤中增長了

viewBox="0,0,40,30"

就發生如此大的變化，那viewBox的4個屬性值分別是什麼？它們在如何工做呢？

viewBox="0,0,40,30"//x:左上角橫座標，y:左上角縱座標，width:寬度，height:高度

用鑫哥的比方就是：

「SVG就像是咱們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示！」

viewBox的width\height越小，viewBox的效果越明顯。比如咱們截屏工具選中區域越小，後來截屏內容鋪滿屏幕時反差越大。

若是是極端狀況，設置viewBox的width/height的大小和viewpoint也就是svg的width\height同樣大小，那麼即便使用了viewBox，也不會改變原有的效果，代碼以下：

<svg width="400" height="300" viewBox="0,0,400,300" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

效果：

它和沒有給svg使用viewBox時的狀況是同樣的。這和你把一個滿屏截圖鋪滿屏幕顯示是同樣的原理，感覺不到縮放。

---

本文只是皮毛之皮毛，之後再一點點寫流水帳。這種技術能夠怎麼應用呢？相似百度地圖、谷歌地圖那種點擊放大效果就是典型。

參考文章http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/