第三章：坐标系统
3.1视口
文档打算使用的画布区域称作视口。我们可以在<svg>元素上使用width和height属性确定视口的大小。属性的值可以是一个数字，该数字会被当作用户坐标下的像素。也可以指定width和height为带有单位的数字，单位的取值是下列值之一。
① em：默认字体的大小，通常相当于文本行高。
② ex：字母x的高度。
③ px：像素（在支持css2的图形系统中，每英寸为96像素。）
④ pt：点（1/72英寸）。
⑤ pc：12点（1/6英寸）。
⑥ cm：厘米。
⑦ mm：毫米。
⑧ in：英寸。
以下是集中合法的SVG视口声明形式：
<svg width = "200" height = "150"> <svg width = "200px" height = "150px">
以上两个声明都指定了一个200像素宽、150像素高的区域。
<svg width = "2cm" height = "3cm">
这个声明指定了一个2里面宽，3厘米高的区域。
<svg width = "2cm" height = "36pt">
混用单位是可行的，但是并不常用。这个元素指定了一个2厘米宽，36点高的区域。
还可以指定<svg>元素的width和height为百分比。当元素嵌套在另一个<svg>元素里的时候，其百分比根据外层包裹元素进行计算。如果<svg>元素为根元素，其百分比根据窗口尺寸计算。
3.2使用默认用户坐标。
阅读器设置了一个坐标系统，其中水平坐标（x坐标）向右递增，垂直坐标（y坐标）垂直向下递增。定义视口的左上角x坐标和y坐标均为0.这个点写作（0,0），也被称作原点。这个坐标系统是一个纯粹的几何系统，点没有宽度和高度，其网格线也被认为是无限细的。
<svg width = "200" height = "200"> <rect x="10" y="10" width="50" height="30" style="stroke: black;fill:none;" /> </svg>
以上建立了一个200像素宽，200像素高的视口，然后绘制了一个矩形，它的左上角在坐标（10,10）位置，宽为50像素，高为30像素。
即使视口中没有指定单位，也可以在某些SVG形状元素中指定单位。
<svg width = "200" height = "200"> <rect x="10mm" y="10mm" width="15mm" height="10mm" style="stroke: black;fill:none;" /> </svg>
<!-- 使用明确指定单位的矩形 -->
在<svg>元素中指定单位并不会影响其他元素中没有给定单位的坐标。
<svg width = "70mm" height = "70mm"> <rect x="10" y="10" width="50" height="30" style="stroke: black;fill:none;" /> </svg>
<!-- 指定单位的视口和没有指定单位的矩形 -->
3.3为视口指定用户坐标
没有单位的数值都被视为像素，你可能想要设置一个坐标系统，其中每个用户坐标表示1/16厘米。在这个系统中，一个边长为40单位的方块显示的标尺是2.5厘米。
为了实现这一效果，我们将在<svg>元素上设置viewBox属性。这个属性的值由4个数值组成。它们分别代表想要叠加在视口上的用户坐标的最小x坐标、最小y坐标、宽度和高度。
因此想要在4厘米*5里面的图纸上设置一个每厘米16个单位的坐标系统，要使用这个开始标记：
<svg width = "4cm" height = "5cm" viewBox = "0 0 64 80">
使用viewBox：
<svg width = "4cm" height = "5cm" viewBox = "0 0 64 80"> <rect x="10" y="35" width="40" height = "40" style = "stroke: black;fill:none;" /> <!-- 房顶 --> <polyline points="10 35,30 7.68,50 35" style="stroke: black;fill: none;" /> <!-- 房门 --> <polyline points="30 75,30 55,40 55,40 75" style="stroke: black;fill: none;" /> </svg>
为viewBox属性指定的数值可以使用逗号或者空格分隔。如果宽度或者高度都为0，则没有图形显示。宽度和高度要求大于等于0，为它们指定负值是错误的。
在SVG中几乎所有的数字都是十进制浮点数。SVG阅读器程序需要支持至少32位精度的数字，并且对于某些计算鼓励使用更高精度的数字。
3.4 保留宽高比
前面的例子中，视口和viewBox的宽高比是相同的（4/5 = 64/80）。但是，如果视口的宽高比和viewBox不一样，会发生什么情况？如在这个示例中，viewBox的宽高比为1:1(宽度和高度相同),但是视口的宽高比为1:3(高度是宽度的3倍)
<svg width = "45px" height = "135px" viewBox = "0 0 90 90">
在这种情况下，SVG可以坐三件事：
①按照较小的尺寸等比例缩放图形，以使图形完全填充视口。在这个例子中，图片将变为原始宽高的一半。这种情况下，由于图片在某一方向比视口小，所以我们必须指定将图片放置在哪里。
②按照较大的尺寸等比例缩放图形并裁剪掉超出视口的部分。在这个例子中，图片会变成原始宽高的1.5倍。这种情况下，由于图片在某一方向比视口大，我们必须指定哪个区域被剪切掉。
③拉伸和挤压绘图以使其恰好填充新的视口（也就是说，完全不保留款高波）
3.4.1 为preserveAspectRatio指定对齐方式
preserveAspectRatio属性允许我们指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是要裁剪。这一属性的模型为：
preserveAspectRatio = "alignment [meet | slice]"
其中alignment指定轴和位置，可选值为下表中组合值之一。对齐说明符由一个x对齐方式的值和一个y对齐方式的值(min、mid或者max)组合而成。preserveAspectRatio的默认值为xMidYMid meet。
y对齐方式由大写字母开始，因为x对齐方式和y对齐方式呗连接称为一个单词
preserveAspectRatio对齐方式的可选值。
| y对齐 | x对齐 | ||
|
xMin 按视口左侧边缘，viewBox最小x值对齐 |
xMid 按视口水平中心，viewBox中点x值对齐 |
xMax 按视口右侧边缘，viewBox最大x值对齐 |
|
|
yMin 按视口顶部边缘，viewBox最小y值对齐 |
xMinYMin | xMidYMin | xMaxYMin |
|
yMid 按视口垂直中心，viewBox中点y值对齐 |
xMinYMid | xMidYMid |
xMaxYMid |
|
yMax 按视口底部边缘，viewBox最大y值对齐 |
xMinYMax |
xMidYMax |
xMaxYMax |
因此，如果想要viewBox=“0 0 90 90”内的图片完全适配宽为45像素、高为135像素的视口，并且与视口顶部对齐，要编写如下代码：
<svg width = "45px" height = "135px" viewBox = "0 0 90 90" preserveAspectRatio = "xMinYMin meet">
这种由于宽度正好适配的情况下，x对齐方式并不重要。也可以使用xMidYMin或者xMaxYMin。然而，通常在不知道视口宽高比时才会使用preserveAspectRatio。
如果没有指定preserveAspectRatio，其默认值为xMidYMid meet，它会缩小图像以适配可用的空间，并且使它水平和垂直居中。
3.4.2使用meet说明符：展示缩小的图像适配闭合viewBox
<svg width = "45px" height = "135px" viewBox = "0 0 90 90" preserveAspectRatio = "xMinYMin meet">
3.4.3使用slice说明：真实了使用slice说明符裁剪图像不适合视口的部分。
<svg width = "45px" height = "135px" viewBox = "0 0 90 90" preserveAspectRatio = "xMinYMin slice">
http://oreillymedia.github.io/svg-essentials-examples/ch03/meet_slice_specifier.html(在线编辑选项。)
3.4.4 使用none说明符。
最后，还有第三个选项用于在viewBox和视口的宽高比不同时缩放图像。如果指定preserveAspectRatio="none",那么图像不会被等比例缩放，以使它的用户坐标适合视口。
<!-- 不保留宽高比 --> <!-- 高视口 --> <svg width = "45px" height = "135px" viewBox = "0 0 90 90" preserveAspectRatio = "none"> <!-- 宽视口 --> <svg width = "135px" height = "45px" viewBox = "0 0 90 90" preserveAspectRatio = "none">
3.5嵌套坐标系统
我们可以在任何时候讲另一个<svg>元素插入到文档中来建立新的视口和坐标系统。其效果是创建一个稍后可以绘制图形的“迷你画布”。
示例：在主画布上展示一个圆，然后在主画布上的新画布（轮廓为一个蓝色矩形）内还展示了一个圆。
首先，为主坐标系统生成SVG和圆（其用户坐标与这个文档中的视口正好重合。）
<svg width = "200px" height = "200px" viewBox = "0 0 200 200" > <circle cx="25" cy="25" r="25" style="stroke: black;fill:none;" /> </svg>
效果图：
然后，绘制盒子的边界来显示新视口的位置：
<svg width = "200px" height = "200px" viewBox = "0 0 200 200" > <circle cx="25" cy="25" r="25" style="stroke: black;fill:none;" /> <rect x="100" y="5" width="30" height="80" style="stroke: blue;fill:none;" /> </svg>
效果图：
然后，我们来为新视口添加另一个<svg>元素。除了指定viewBox、width、height和preserveAspectRatio规格，还可以在闭合的<svg>元素上指定x和y的属性，建立新视口（如果没有给x和y指定值，则假定为0）
使用嵌套的<svg>元素设置新的坐标系统并不会改变视觉显示，但是它允许我们在该新系统中添加圆。
<svg width = "200px" height = "200px" viewBox = "0 0 200 200" > <circle cx="25" cy="25" r="25" style="stroke: black;fill:none;" /> <rect x="100" y="5" width="30" height="80" style="stroke: blue;fill:none;" /> <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax meet"> <circle cx="25" cy="25" r="25" style="stroke: black;fill:none;"> </svg> </svg>
效果图：
嵌套元素的视口的宽高比，将按照父SVG辈压缩或者拉伸的坐标来求值以适配视口，这可能导致图像被挤压和剪裁或者缩放。