svg的transform-matrix詳解

寫在最先：如果你發現百度幾個小時都還沒能解決問題的話，為什么不翻牆上個google呢？

以及，下圖這種不負責任的錯誤答案居然還有那么多人轉。。。

 

一、svg transform的種類

• translate（平移）
• skew（傾斜）
• rotate（旋轉）
• scale（縮放）
• matrix（矩陣操作，可涵蓋前四者，威力十分強大）

二、用matrix表達前三者

matrix接口樣式：matrix(a,b,c,d,e,f)

對應矩陣：

a c e b d f 0 0 1

1.Translate(tx, ty) 

矩陣：

1 0 tx 0 1 ty 0 0 1

寫法：matrix(1,0,0,1,tx,ty)

2.Scale(sx, sy)

矩陣：

sx 0 0 0 sy 0 0 0 1

寫法：matrix(sx,0,0,sy,0,0)

3.Rotate(a) 

矩陣：

cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1

寫法：matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)

3+.Rotate(a, cx, cy) 

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy 0 0 1

寫法：matrix(cos(a), sin(a), -sin(a), cos(a),  -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty)

4.skew(skewX, skewY)

4.1 skewX

矩陣：

1 tan(a) 0 0 1 0 0 0 1

寫法：matrix(1, 0, tan(a), 1, 0, 0)

4.2 skewY

矩陣：

1 0 0 tan(a) 1 0 0 0 1

寫法：matrix(1, tan(a), 0, 1, 0, 0)

5.如果你的使用包含旋轉，縮放，平移等多種

例如：

<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)">

對應矩陣：

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx + tx sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy + ty 0 0 1

寫法：matrix(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty)

以上式為例: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

此處scale為1，因此不考慮。如果scale不為一（scale (sx, sy)），則：

matrix (sx × cos(a), sy × sin(a), -sx × sin(a), sy × cos(a), (-cx × cos(a) + cy × sin(a) + cx) × sx + tx, (-cx × sin(a) - cy × cos(a) + cy) × sy + ty)

最后，在js中的格式為：

svgItem.setAttribute('transform', `matrix(
    ${sx * Math.cos(a)},
    ${sy * Math.sin(a)},
    ${-sx * Math.sin(-a)},
    ${sy * Math.cos(a)},
    ${(-cx * Math.cos(a) + cy * Math.sin(a) + cx) * sx + Math.floor(tx)},
    ${(-cx * Math.sin(a) - cy * Math.cos(a) + cy) * sy + Math.floor(ty)})`
);

 

—— 完 ——

 

(-cx * Math.cos(a) + cy * Math.sin(a) + cx) * sx + Math.floor(tx)