Come calcolare la matrice di trasformazione SVG dai valori di rotazione/traslazione/scala?

Question

Ho seguito i dettagli con me:

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

necessità di cambiare di sopra della linea di:

<g transform="matrix(?,?,?,?,?,?)"> 

Qualcuno può aiutarmi a raggiungere questo obiettivo?

Answer 1

translate (tx, ty) può essere scritta come la matrice:

1 0 tx 
0 1 ty 
0 0 1 

Scale (sx, sy) può essere scritta come la matrice:

sx 0 0 
0 sy 0 
0 0 1 

Ruota (un) può essere scritto come una matrice:

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

Ruota (a, cx, c y) è la combinazione di una traduzione da (-cx, cy), una rotazione di un gradi e una traduzione ritorna (cx, cy), che assicura:

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 

Se solo moltiplicare questo con la definizione matrice che si ottiene:

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 

che corrisponde al SVG matrice di trasformazione:

(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty).

Nel tuo caso: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

Se si include la scala (sx, sy) trasformare, la matrice è:

(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)

Si noti che questo presuppone che si sta facendo le trasformazioni nell'ordine in cui li ha scritti.

Answer 2

Prima ottenere l'elemento g utilizzando document.getElementById se ha un attributo id o un altro metodo appropriato, quindi chiama consolidate ad es.

var g = document.getElementById("<whatever the id is>"); 
g.transform.baseVal.consolidate();