這篇文章主要介紹svg的兩個屬性viewBox和preserveAspectRatio
1. viewBox
viewBox可以理解為截屏工具勾怒，viewport表示視區(qū)的大小也就是是svg自身大小室梅，可以理解為畫布泡态，以下面的代碼為例
<svg width="200" height="100" style="border:1px solid blue;">
<rect x="5" y="5" width="15" height="5" fill="red"/>
</svg>
viewBox: "x, y, width, height" (x,y)表示截屏位置的起始點蕊连，width表示截屏寬度,height表示截屏高度从绘，截屏后的圖像將鋪滿原來的畫布,如果viewBox的height和width比例與viewport相同就可以剛好成等比例縮放访忿。
如上圖所示：viewBox的區(qū)域是紅色小方塊標記的地方，寬20高10伴榔，與viewport的寬比為200/20 = 10纹蝴， 高比例為100/10 = 10，寬和高比例相等則viewBox的縱橫分別放大10倍剛好鋪滿viewport踪少。起點距離（5）和長方形寬度（15）均放大了10倍塘安。
2. preserveAspectRatio
當viewbox和viewport的寬和高比例不一致的時候可以指定如何縮放。preserveAspectRatio必須與viewBox配合使用援奢，單獨使用無效兼犯。它有兩個參數(shù)，第一個參數(shù)是必須的第二個是可選的萝究。
preserveAspectRatio："xMidYMid meet"
第一個參數(shù)：表示viewBox與viewport是如何對齊的免都，也就是截屏后開始縮放的起始點位置。
| x | y | none |
|---|---|---|
| xMin | YMin | - |
| xMid | YMid | - |
| xMax | YMax | - |
舉個例子xMinYmax表示viewport的左下角, xMidYMid表示viewport中心（vieBox會在viewport的中心位置向四周擴散）帆竹。
none: 使用none之后會忽略第二個參數(shù)meet/slice（第二個參數(shù)沒有作用了）,它會忽略viewBox與viewport的長寬比例绕娘，將viewBox填滿viewport,所以縱橫伸縮比例可能不一致。橫向拉伸了200/20=10倍栽连，縱向拉伸了100/20=5倍险领。
第二個參數(shù)：表示
| meet（默認值） | slice |
|---|
meet: 保持縱橫比例縮放viewBox去適應(yīng)viewport,如果x方向與y方向放大的比例不一樣則都選擇較小的比例進行x和y方向放大/縮小侨舆。
如上圖所示，x比例200/20 = 10绢陌，y比例100/20=5挨下，最終x和y方向都放大5倍。紅色矩形部分的長寬放大了5倍脐湾。
slice:保持縱橫比例縮放viewBox去適應(yīng)viewport,如果x方向與y方向放大的比例不一樣則都選擇較大的比例進行x和y方向放大/縮小臭笆。放大后超出viewport的部分將被剪切。
如上圖所示秤掌，x比例200/20 = 10愁铺，y比例100/20=5，最終x和y方向都放大10倍闻鉴。紅色矩形部分的長寬放大了10倍茵乱。
