SVG坐标系统与坐标转换

这一章非常基础，非常重要，同时也是相对比较难懂一点的，特别是ViewBox与视口的关系

1.坐标系统与视口(ViewPort)

SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，SVG的坐标系统称为工作区坐标系统或者矩阵坐标系统。

SVG的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在SVG中被称为"视口",超出这个视口的图形将不被显示，所以视口也就是SVG的渲染区域，用户能看到SVG内容的区域。SVG客户端在解析渲染一个SVG文件前，会根据实际显示设备的参数来确定视口的参数，比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后，SVG客户端就会初始化视口，建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定，也就是SVG整个图像在浏览器中显示的大小，使得视口的坐标系统同用户坐标系统相同。

默认情况下,SVG坐标系的原点(0,0)与左上角，与视口的左上角是完全重合。此时，SVG坐标系同用户坐标系一致,没有发生变形错位的现象

2.ViewBox属性

如果我们定义的SVG 图形太大或者太小，就可以使用“ViewBox”属性，重新定义视口的坐标范围，从而默认的坐标度量单位也就会随之改变。“ViewBox”属性4个发生分别是:左上角X坐标、左上角Y坐标、ViewBox的宽度和ViewBow的高度。

ViewBox属性是一个非常有用的属性，在进行图形缩放和移动，主要就是对这个属性进行改变，就能实现类似于谷歌地图一样的功能。

3.Transform属性

能过"Transform"属性，我们可以对图形进行位置和形状的变换，其本质是一种几何上的坐标变换。

3.1 平移变换

平移变换可以改变坐标系的原点位置，而新坐标系的坐标轴方向不变。语法如下：

Transform ="translate(x,y)";

例子:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<!-- Created by SVGDeveloper 1.0 -->
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform ="translate(0,0)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(50,50)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(100,100)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
</svg>

所有圆的初始圆心位置都要是相同，不进行平移变换，它们应该是重叠在一起。进行平移变换后，它们在新的坐标位置进行渲染。

3.2 旋转变换

语法：Transform="rotate(angle cx,cy)"

"angle"是旋转的角度，默认单位是度,正值为顺时针旋转,负值为逆时针旋转;(cx,cy)为旋转中心坐标，如果该坐标省略，刚默认为原点坐标(0,0)。

基本用法同上

3.3伸缩变换

语法: Transform="scale(sx,sy)"

sx和sy分别表示X轴方向和Y轴方向拉伸和缩放的比例系数。比例系数大于1是拉伸，小于1是缩小。

基本用法同上

3.4歪斜变换

语法：Transform="skewX(Xangle)"或者Transform="skewY(Yangle)"

Xangle是没X轴歪斜的角度，Yangle刚是没Y轴歪斜的角度，均为实数.

基本用法同上

3.5矩阵变换

以上介绍的4种坐标变换的数学基础是矩阵的计算，也就是说坐标变换的是一种矩阵变换，这些特殊的坐标变换都是可以用矩阵变换来表示，矩阵变换是它们通用的表达方式。是最灵活的一种

语法：Transform="matrix(a b c d e f)"

如果大家有兴趣可以去查阅相关的资料，在此就不详细描述。

这一章非常基础，非常重要，同时也是相对比较难懂一点的，特别是ViewBox与视口的关系

1.坐标系统与视口(ViewPort)

SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，SVG的坐标系统称为工作区坐标系统或者矩阵坐标系统。

SVG的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在SVG中被称为"视口",超出这个视口的图形将不被显示，所以视口也就是SVG的渲染区域，用户能看到SVG内容的区域。SVG客户端在解析渲染一个SVG文件前，会根据实际显示设备的参数来确定视口的参数，比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后，SVG客户端就会初始化视口，建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定，也就是SVG整个图像在浏览器中显示的大小，使得视口的坐标系统同用户坐标系统相同。

默认情况下,SVG坐标系的原点(0,0)与左上角，与视口的左上角是完全重合。此时，SVG坐标系同用户坐标系一致,没有发生变形错位的现象

2.ViewBox属性

如果我们定义的SVG 图形太大或者太小，就可以使用“ViewBox”属性，重新定义视口的坐标范围，从而默认的坐标度量单位也就会随之改变。“ViewBox”属性4个发生分别是:左上角X坐标、左上角Y坐标、ViewBox的宽度和ViewBow的高度。

ViewBox属性是一个非常有用的属性，在进行图形缩放和移动，主要就是对这个属性进行改变，就能实现类似于谷歌地图一样的功能。

3.Transform属性

能过"Transform"属性，我们可以对图形进行位置和形状的变换，其本质是一种几何上的坐标变换。

3.1 平移变换

平移变换可以改变坐标系的原点位置，而新坐标系的坐标轴方向不变。语法如下：

Transform ="translate(x,y)";

例子:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<!-- Created by SVGDeveloper 1.0 -->
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform ="translate(0,0)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(50,50)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(100,100)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
</svg>

所有圆的初始圆心位置都要是相同，不进行平移变换，它们应该是重叠在一起。进行平移变换后，它们在新的坐标位置进行渲染。

3.2 旋转变换

语法：Transform="rotate(angle cx,cy)"

"angle"是旋转的角度，默认单位是度,正值为顺时针旋转,负值为逆时针旋转;(cx,cy)为旋转中心坐标，如果该坐标省略，刚默认为原点坐标(0,0)。

基本用法同上

3.3伸缩变换

语法: Transform="scale(sx,sy)"

sx和sy分别表示X轴方向和Y轴方向拉伸和缩放的比例系数。比例系数大于1是拉伸，小于1是缩小。

基本用法同上

3.4歪斜变换

语法：Transform="skewX(Xangle)"或者Transform="skewY(Yangle)"

Xangle是没X轴歪斜的角度，Yangle刚是没Y轴歪斜的角度，均为实数.

基本用法同上

3.5矩阵变换

以上介绍的4种坐标变换的数学基础是矩阵的计算，也就是说坐标变换的是一种矩阵变换，这些特殊的坐标变换都是可以用矩阵变换来表示，矩阵变换是它们通用的表达方式。是最灵活的一种

语法：Transform="matrix(a b c d e f)"

如果大家有兴趣可以去查阅相关的资料，在此就不详细描述。