理解svg坐标系统及变化（二）

svg坐标系统变化

svg能够通过坐标系统的变化来使得图形达到缩放、平移、变形和旋转的效果。
svg的transform属性和viewBox属性是两个能在元素上应用新建用户坐标系统的属性。
当svg元素应用transform属性时，这个元素复制一个当前用户坐标系统也就是viewBox，然后再对这个复制的坐标系统上进行各种变化操作，svg图形就是在这个变化后的坐标系统上作图的。

变化操作各函数语法

translate(tx [ty]),ty为可选参数，默认为0；如transform="translate(100 300)"
scale(sx [sy]),sy为可选参数，默认与sx相等；如transform="scale(2)"
skewX(<skew-angle>)，skewY(<skew-angle>)
rotate(<rotate-angle> [<cx> <cy>])沿着旋转中心点cx,cy旋转rotate-angle角度，默认的cx,cy为0

坐标系统链式及嵌套变化

对坐标系统一次执行多项变化操作称为链式变化。如

transform="rotate(45 150 170) translate(200)"
各项变化依次相对于前项变化进行操作

当一个进行了变化操作元素的子元素又进行变化操作时称为嵌套变化。
嵌套变化和链式变化一个不同点就是链式变化是针对一个元素变化，而嵌套变化是另外一个元素相对于前一个元素的变化。

使用css控制svg transform属性

使用css控制svg transform属性必须满足css使用规范：变化函数的参数必须用逗号隔离，空格无效。rotate()函数不需要

参数了，通过transform-origin控制。如

#parrot {
    transform-origin: 50% 50%;
    transform: rotate(45deg);
    }

HTML和SVG的transform变化有一些区别。最主要的不同就是，HTML的坐标系统是相对于元素本身的，如上面例子的transform-origin: 50% 50%;就是元素本身的中心位置。但是SVG变化的坐标系统是用户坐标系统的一个复本。