o'Reill的SVG精髓（第二版）学习笔记——第三章

第三章：坐标系统

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辈压缩或者拉伸的坐标来求值以适配视口，这可能导致图像被挤压和剪裁或者缩放。