[note]SVG格式图形显示的坐标系统规则

SVG的坐标系统

　　所有的渲染都是在某个矩形（视口，viewport）中发生。

　　SVG的客户端解释程序获得一些信息后（设备像素数所定义的高度值、宽度值，一个像素所代表的具体尺寸这样三个参数），首先初始化视口，建立以像素为单位的视口坐标系，接着建立用户坐标系，使两者一致，也就是使用户坐标系中的一个单位（如1m或1cm）等于视口坐标系中的一个像素。

　　渲染SVG文件时，如果SVG文件的长度值与坐标值等没有规定单位，则缺省地采用用户坐标系的单位，也就是使用像素作为度量单位。如果有特定的单位，如mm,cm等，则需要经过换算，将尺寸转换为用户坐标值。这也是客户端解释程序时，需要第三个参数的原因。

　　还可以定义自己的坐标系。方式是在一段SVG文本中定义一种叫做变换（transformation）的格式，其含义类似于解析几何中的坐标转换和映射规则。变换的格式中说明了此变换所作用的对象应该使用设么方式进行平移、缩放、旋转、歪斜等。变换提供了一种整体的方式，用它可对一个或一组图像对象进行变换，改变其比例、位置、形状等，以达到使用自定义坐标系的目的。

初始化视口和坐标系统

　　客户端渲染SVG图像时，需要和具体设备或上层用户程序进行交互通讯，以确定视口。有时SVG只作为对象嵌入网页中。这个网页本身可能有一些渲染视口的一些属性参数（如位置），而<svg>标记内，又有自己定义的高与宽参数，于是客户端尽量使用两者信息来创建合适的位置和尺寸的初始视口。

　　<svg>的width和height属性用于标记SVG图像渲染得初始视口大小。如果没有带单位，则使用用户坐标系的长度单位：像素。

　　用户坐标系：原点在视口左上角，x轴正向朝右，y轴正向朝下，文字从上到下从左到右。如果不进行坐标变换，一切都以初始坐标系为准。

　　默认情况下，视口坐标系和用户坐标系一致，度量单位也一致（用户坐标系中的一个缺省单位代表视口坐标系中一个像素）。

情况有变：都是因为"viewBox"属性

　　用户的初始视口和初始坐标系是一致的。长度的缺省度量单位为像素。但如果<svg>元素中出现"ViewBox"属性，那么情况就不同了。"viewBox"的作用是规定视口的坐标范围，范围重新定义后，缺省的坐标度量单位也会改变。
<svg width="4cm" height="4cm" viewBox="0 0 400 400">

　　意思是SVG文档的视口大小为4cm，坐标范围被标记为（0 0 400 400）。合理的解释可能是：视口为400乘400像素，而缺省的用户坐标系的度量单位变成0.01cm，而不是具体的一个像素。即相当于对整个SVG图像进行坐标变换。即可以理解为显示屏上1像素代表0.01cm。

　　如果使用了viewBox，用保持viewBox值不变而修改width和height属性，整幅图像会随之放大或缩小。这是单纯使用<svg>的width和height所达不到的。

　　地图……本身就有着太多坐标纠葛的东西，要用SVG来表达，问题多多。这个世界太复杂，我也太贪心了。

　　最后，为进一步了解SVG的坐标系统及其坐标规则，你还可以阅读"SVG坐标系统与SVG坐标变换"一文，该文是IBM Developerworks会员区的内容，本文通过详细的文字介绍及实例介绍了SVG的坐标系统，以及SVG的坐标变换内容。