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屬性的時候，該元素會創(chuàng)建一個本地坐標系統(tǒng)，然后將變換的方向變換這個坐標系，然后把該元素在變換后的本地坐標系上畫出來，上面第2點的動圖就是這種理解方式，也就是說變換是應用到了坐標系上，這里有個鏈接，解釋了這一點，理解了這一點其實就明白了為什么旋轉和縮放都是按坐標系原點進行的；注意：在代碼中計算點與矩陣相乘的時候，變換是從右到左的，越靠右的變換矩陣 越先被應用

6、自己做的svg編輯器，關于變換的處理思路以及方式：

1、有三種變換：移動、縮放、旋轉；
2、用鼠標或者手指控制；
3、當鼠標按下，變換開始，鼠標移動變換繼續(xù)，鼠標抬起，變換結束；
4、變換過程中，設置svg元素的transform屬性，如移動變換：transform="translate(100,100)"，當鼠標抬起的時候，將移動、縮放的變換，應用到元素所有點上（如直線的起點和終點），刪除transform屬性，旋轉變換保持transform屬性，這樣變換結束之后，只保留旋轉變換，其他變換都應用到點上了，相當于消耗掉了；
5、當元素被旋轉了，在此基礎上平移的話，設置transform的時候，要先設置平移再設置旋轉；在旋轉基礎上縮放，需要先設置旋轉，后設置縮放；要根據第以上第5條去理解；