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，变态