1.viewPort
表示SVG可見區(qū)域的大小慧妄，或者可以想象成舞臺(tái)大小，畫布大小窟蓝。
<svg width="500" height="300"></svg>
上面的SVG代碼定義了一個(gè)視區(qū)饱普，寬500單位套耕，高300單位。
注意這里的措辭是“單位”雇卷，不是“像素”。雖然說小染，width/height如果是純數(shù)字贮折，使用的就是“像素”作為單位的。
也就是說踊赠，上面SVG的視區(qū)大小就是500px * 300px.
當(dāng)然每庆，故弄“單位”這個(gè)措辭，潛臺(tái)詞就是你可以使用其他類型的單位伦籍，涵蓋常見CSS單位：
單位 含義
em 相對(duì)于父元素的字體大小
ex 相對(duì)于小寫字母"x"的高度
px 相對(duì)于屏幕分辨率而不是視窗大刑弧：通常為1個(gè)點(diǎn)或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter, 表毫米
pt 1/72英寸
pc 12點(diǎn)活字胚嘲，或1/12點(diǎn)
% 相對(duì)于父元素。正常情況下是通過屬性定義自身或其他元素
除了SVG本身攻锰，其他一些元素妓雾，例如<rect>的width/height屬性也可以使用上面的這些單位君珠，也是默認(rèn)單位是像素娇斑。
2.viewBox屬性
1.例子：
<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>
如果不看viewBox, 你一定會(huì)覺得詫異——SVG尺寸明明有400*300像素，而小小的<rect>大小只有其1/20唯竹，但是顯示出來的卻占據(jù)了半壁江山苦丁！不科學(xué)啊产上！
OK, 之所以小小矩形大顯神威就是這里的viewBox起了推波助瀾的作用晋涣。
viewBox值有4個(gè)數(shù)字：
viewBox="x, y, width, height" // x:左上角橫坐標(biāo)，y:左上角縱坐標(biāo)算吩，width:寬度佃扼，height:高度
viewBox顧名思意是“視區(qū)盒子”的意思，好比在說：“SVG啊压昼，要不你就讓我鋪滿你吧~”
更形象的解釋就是：SVG就像是我們的顯示器屏幕翠订，viewBox就是截屏工具選中的那個(gè)框框尽超，最終的呈現(xiàn)就是把框框中的截屏內(nèi)容再次在顯示器中全屏顯示！
3. preserveAspectRatio
1.上面的例子傲绣，SVG的寬高比正好和viewBox的寬高比是一樣的巩踏，都是4:3. 顯然塞琼，實(shí)際應(yīng)用viewBox不可能一直跟viewport穿同一條開襠褲。此時(shí)毅往，就需要preserveAspectRatio出馬了派近，此屬性也是應(yīng)用在<svg>元素上，且作用的對(duì)象都是viewBox侯嘀。
preserveAspectRatio屬性的值為空格分隔的兩個(gè)值組合而成。例如吠谢，上面的xMidYMid和meet.
第1個(gè)值表示诗茎，viewBox如何與SVG viewport對(duì)齊错沃；第2個(gè)值表示，如何維持高寬比（如果有）玉掸。
其中醒叁，第1個(gè)值又是由兩部分組成的把沼。前半部分表示x方向?qū)R，后半部分表示y方向?qū)R租谈。家族成員如下：
值 含義
xMin viewport和viewBox左邊對(duì)齊
xMid viewport和viewBox x軸中心對(duì)齊
xMax viewport和viewBox右邊對(duì)齊
YMin viewport和viewBox上邊緣對(duì)齊捆愁。注意Y是大寫昼丑。
YMid viewport和viewBox y軸中心點(diǎn)對(duì)齊。注意Y是大寫咖城。
YMax viewport和viewBox下邊緣對(duì)齊呼奢。注意Y是大寫。
x, y自由合體就可以了州袒，如：
xMaxYMax
xMidYMid
2.preserveAspectRatio屬性第2部分的值支持下面3個(gè)：
值 ??????? 含義
meet 保持縱橫比縮放viewBox適應(yīng)viewport
slice 保持縱橫比同時(shí)比例小的方向放大填滿viewport
none 扭曲縱橫比以充分適應(yīng)viewport
首先郎哭，看下SVG代碼：
<svg width="400" height="200" viewBox="0 0 200 200" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
截取SVG左邊一半(200正好寬度400的一般)作為視區(qū)菇存，里面有個(gè)150*150的紅色矩形依鸥。
- 如果是meet效果贱迟，代碼如下：
<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
3.表現(xiàn)原理為：SVG寬400, 高200衣吠，viewBox寬200, 高200. x橫軸比例是2, y縱軸比例是1. meet的作用是讓viewBox等比例的同時(shí)，完全在SVG的viewport中顯示惊搏。這里忧换，最小比例是縱向的1，所以酪耳，實(shí)際上viewBox并沒有任何的縮放刹缝。
我們只要對(duì)viewBox屬性值做一點(diǎn)小小的修改（200→300）赞草，就可以感受到縮放了：
<svg width="400" height="200" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
接下來的都差不多了厨疙，可以自己嘗試。
