SVG的viewport，viewBox,preserveAspectRatio縮放

viewport

表示SVG可見區域的大小，或者可以想象成舞臺大小，畫布大小 canvas是繪製SVG內容的一塊空間或區域。理論上，畫布在所有維度上都是無限的。所以SVG可以是任意尺寸。然而，SVG通過有限區域展現在屏幕上，這個區域叫做viewport。SVG中超出視窗邊界的區域會被裁切並且隱藏。 在SVG中，值可以帶單位也不可以不帶。一個不帶單位的值可以在用戶空間中通過用戶單位聲明。如果值通過用戶單位聲明，那麼這個值的數值被認爲和px單位的數值一樣。

SVG的最初座標籤系統和viewport的座標系統是相同的，都是在左上角原點處，沿y軸向下和x軸向右延伸。也就是說，SVG的座標系統類似於Viewport的座標系統，原點(0,0)在左上角處，不管使用單位還是不使用單位，其都是沿y軸向下垂直延伸，沿x軸向右延伸。

你也可以使用單位來聲明值。SVG支持的長度單位有：em，ex，px，pt，pc，cm，mm，in和百分比。

單位	含義
em	相對於父元素的字體大小
rem	相對於根元素html
ex	相對於小寫字母"x"的高度
px	相對於屏幕分辨率而不是視窗大小：通常爲1個點或1/72英寸
in	inch, 表英寸
cm	millimeter, 表毫米
mm	millimeter, 表毫米
pt	1/72英寸
pc	12點活字，或1/12點
%	相對於父元素。正常情況下是通過屬性定義自身或其他元素
px	相對於屏幕分辨率而不是視窗大小：通常爲1個點或1/72英寸

一旦你設定最外層SVG元素的寬高，瀏覽器會建立初始視窗座標系和初始用戶座標系。 初始視窗座標系是一個建立在視窗上的座標系。原點(0,0)在視窗的左上角，X軸正向指向右，Y軸正向指向下，初始座標系中的一個單位等於視窗中的一個"像素"。這個座標系統類似於通過CSS盒模型在HTML元素上建立的座標系。

注意：SVG元素有一個默認值爲hidden的overflow屬性，所以任何超出視窗的內容都會被隱藏。overflow屬性也可以設置爲其它值

viewBox

使用viewBox屬性聲明自己的用戶座標系。如果你選擇的用戶座標系統和視窗座標系統寬高比（高比寬）相同，它會延伸來適應整個視窗區域（一分鐘內我們就來講個例子）。然而，如果你的用戶座標系寬高比不同，你可以用preserveAspectRatio屬性來聲明整個系統在視窗內是否可見，你也可以用它來聲明在視窗中如何定位。我們會在下個章節裏討論這一情況的細節和例子。在這一章裏，我們只討論viewBox的寬高比符合視窗的情況-在這些例子中，preserveAspectRatio不產生影響。

viewBox語法

viewBox屬性接收四個參數值，包括：<min-x>, <min-y>, width 和 height。 <min-x> 和 <min-y> 值決定viewBox的左上角，width和height決定視窗的寬高

1. 如果沒有viewBox, 應該是長這樣的：

<rect>大小隻有整個SVG舞臺的1/20.

2. viewBox="0,0,40,30"相當於在SVG上圈了下圖左上角所示的一個框框：

3. 然後把這個框框，連同框框裏的小矩形一起放大到整個SVG大小（如下gif）:

preserveAspectRatio

preserveAspecRation屬性強制統一縮放來保持圖形的寬高比。

preserveAspectRation語法

preserveAspecRation=「xMIdYMId meet」

preserveAspectRatio 屬性的值爲空格分隔的兩個值組合而成。

第1個值表示，viewBox如何與SVG viewport對齊；第2個值表示，如何維持高寬比（如果有）。

其中，第1個值又是由兩部分組成的。前半部分表示x方向對齊，後半部分表示y方向對齊。家族成員如下：

值含義

xMin	viewport和viewBox左邊對齊
xMid	viewport和viewBox x軸中心對齊
xMax	viewport和viewBox右邊對齊
YMin	viewport和viewBox上邊緣對齊。注意Y是大寫。
YMid	viewport和viewBox y軸中心點對齊。注意Y是大寫。
YMax	viewport和viewBox下邊緣對齊。注意Y是大寫。

preserveAspectRatio屬性第2部分的值支持下面3個：

值含義

meet	保持縱橫比縮放viewBox適應viewport，受
slice	保持縱橫比同時比例小的方向放大填滿viewport，攻
none	扭曲縱橫比以充分適應viewport，變態