SVG实战开发学习（四）——坐标系统与坐标轴转换

svg的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在svg中被称为"视口"，超出这个视口的图形将不被显示，所以视口也就是svg的渲染区域，用户能看到svg内容的区域。svg的视口尺寸由<svg>标签的width和height两个属性来决定的，也就是整个图像在浏览器中显示的大小，使得视口的坐标系统同用户坐标系统相同。如果有若干个<svg>元素嵌套在一起，那么决定初始化视口的是最外层的那个<svg>元素。

【transition属性】

平移变换可以改变坐标系的原点位置，而新坐标系的坐标轴方向不变。语法如下：transform="translate(x,y)"

【旋转变换】

语法：transform="rotate（angle cx,cy）"

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

如果即要使用旋转，又要使用平移变换，要怎么做呢？其实也很简单，使用下面的形式就可以做到了：

<g transform=" rotate(30); translate(50,50) ">

【伸缩变换】

语法：transform="scale(sx,sy)",sx和sy分别表示X轴方向和Y轴方向拉伸或缩小的比例系数。比例系数大于1是拉伸，小于1是缩小。

你可以写成<g transform="scale(2,0.5)">，x轴方向拉伸2倍，Y轴方向缩小为原来的一半；<g transform="scale(2,2)">与<g transform="scale(2)">效果是相同的，因为缺少sy这个参数，SVG将会把Y轴上的拉伸系数等于X轴上的拉伸系数。

【歪斜变换】

语法：transform="skewX(Xangle)"或者transform="skewY(Yangle)",Xangle是沿X轴歪斜的角度，Yangle是沿Y轴歪斜的角度，均为实数。