前言
SVG元素的形变都会用到一个元素属性transform，跟CSS的transform的形变差不多。
HTML transform和SVG transform
SVG自带transform属性，例如：
<svg width="200" height="150">
<rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect>
</svg>
功能基本上和CSS3中的transform差不多包括：位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix。不同的是没有单独的可以设置X或者Y的类似translateX, rotateX方法。
两者间不一样的地方有：
1、CSS3 transform一般用在普通元素上，虽然也可以应用在SVG元素上，但是IE浏览器(IE edge未测试)却不支持SVG元素；
2、HTML元素的CSS3 transform和SVG的transform坐标系统大相径庭；
平常我们使用transform其坐标是相对于当前元素而言的，默认是元素的中心点变换，我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的，跟HTML的transform差别较大，理解上也更加麻烦。而本文就是彻底理清SVG中的transform到底是怎么工作的。
平移
你能把元素移动一段距离，甚至你可以根据相应的属性定位它。translate()变形方法专门效力于这个目的。
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
该示例将呈现一个矩形，移到点(30,40)，而不是出现在点(0,0)。
如果没有指定第二个值，它默认被赋值0。
旋转
旋转一个元素是相当常见的任务。使用rotate()变形就可以了：
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
该示例显示了一个方形，旋转了45度。rotate()的值是用角度数指定的。
斜切
利用一个矩形制作一个斜菱形。可用skewX()变形和skewY()变形。每个需要一角度以确定元素斜切到多远。
<rect x="20" y="20" width="20" height="20" transform="skewX(45)" />
缩放
scale()变形改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了，它默认等于第一个值。
<rect x="20" y="20" width="20" height="20" transform="scale(0.5)" />
用matrix()实现复杂变形
所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形，可以直接用matrix(a, b, c, d, e, f)变形设置结果矩阵，利用下面的矩阵，它把来自上一个坐标系统的坐标映射到新的坐标系统：
