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