SVG基础----SVG坐标系统和图形转换

1、坐标系统

一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值

而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上

2、TRANSFORM属性

transform用于在一个元素上指定一个或多个转换效果。它使用一系列预定义的值作为参数，并按先后顺序逐一应用到元素上

SVG可用的转换有：旋转，位移，倾斜和旋转。SVG的transform属性和CSS的transform相似，但是它们的参数不同

可以在一个SVG元素上通过matrix()函数来应用一个或多个转换

matrix(<a> <b> <c> <d> <e> <f>)  

上面的声明指定包含6个参数的矩阵变换。matrix(a,b,c,d,e,f)相当于matrix [a b c d e f]

要移动一个SVG元素，你可以使用translate()函数

translate(<tx> [<ty>])

translate()函数可以带一个或两个参数，分别用于表示水平或垂直的位移

ty参数是可选的，如果没有指定，它默认是0。tx和ty参数可以使用空格隔开，也可以使用逗号隔开，还有它们不需要使用单位。它们的单位使用的是用户坐标系统的单位

<circle cx="0" cy="0" r="100" transform="translate(100 300)" />  

可以使用scale()函数来缩放SVG元素

scale(<sx> [<sy>])

scale()函数可以带一个或两个参数，分别表示水平或垂直方向上的缩放。

sy参数是可选值，如果没有指定，它等于sx的值。sx和sy参数可以使用空格或逗号隔开。并且它们是无单位的数字

<rect width="150" height="100" transform="scale(2)" x="0" y="0" />  

注意：当一个SVG元素被缩放的时候，整个当前坐标系统也会被同时缩放，导致元素会在viewport中被重新定位

要倾斜一个SVG元素，你需要使用skewX或skewY函数

skewX(<skew-angle>)
skewY(<skew-angle>) 

注意，元素倾斜也可能会是元素在viewport中重新定位

可以使用rotate()函数来旋转一个SVG元素

rotate(<rotate-angle> [<cx> <cy>]) 

rotate()函数通过rotate-angle来指定旋转角度。于CSS转换中的 rotation 不同，你不能为旋转角度指定单位，只能使用度（degrees）为单位。角度值使用的是无单位的数字，默认单位为：度

cx和cy为可选参数，用于代表旋转的中心点。如果没有提供cx和cy值，那么旋转的中心点位于当前用户坐标系统的原点

<g id="parrot" transform="rotate(45 50 50)" x="0" y="0">
    ......
</g>