1、对（x,y）坐标变换，e和f表示移动，剩下的表示缩放和旋转，可以利用svg.createSVGTransform()方法构造出一个变换，调用相关api生成矩阵；
[a c e] x
[b d f] * y = (a*x + c*y + e, b*x + d*y + f)
[0 0 1] 1
2、svg的缩放默认都是以svg画布的原点（左上角）为中心点进行缩放的；如果想要按照某一点进行缩放，如元素的中心点，需要先以该点为基准点，将元素位移到画布原点，然后进行缩放，最后再以该点为基准移动到原来的位置；
740839-20170908105821569-500809835.gif
3、同理，svg的旋转也是围绕画布原点进行的，但是svg提供了按照某一个点进行旋转的表达式：rotate(angle, centerX, centerY)，因此不需要先移动再旋转再移动回去；
4、svg元素的getBBox函数返回的是元素相对于svg空间的位置，不考虑变换；
5、关于svg变换的理解方式：当svg元素具有transform属性的时候，该元素会创建一个本地坐标系统，然后将变换的方向变换这个坐标系，然后把该元素在变换后的本地坐标系上画出来，上面第2点的动图就是这种理解方式，也就是说变换是应用到了坐标系上，这里有个链接，解释了这一点，理解了这一点其实就明白了为什么旋转和缩放都是按坐标系原点进行的；注意：在代码中计算点与矩阵相乘的时候，变换是从右到左的，越靠右的变换矩阵 越先被应用
6、自己做的svg编辑器，关于变换的处理思路以及方式：
1、有三种变换：移动、缩放、旋转；
2、用鼠标或者手指控制；
3、当鼠标按下，变换开始，鼠标移动变换继续，鼠标抬起，变换结束；
4、变换过程中，设置svg元素的transform属性，如移动变换：transform="translate(100,100)"，当鼠标抬起的时候，将移动、缩放的变换，应用到元素所有点上（如直线的起点和终点），删除transform属性，旋转变换保持transform属性，这样变换结束之后，只保留旋转变换，其他变换都应用到点上了，相当于消耗掉了；
5、当元素被旋转了，在此基础上平移的话，设置transform的时候，要先设置平移再设置旋转；在旋转基础上缩放，需要先设置旋转，后设置缩放；要根据第以上第5条去理解；
网友评论