Как рассчитать матрицу SVG-преобразования по значениям rotate / translate / scale?

#svg #матрицы

У меня есть следующая последовательность трансформаций SVG:




Необходимо написать формулу matrix в соответствии с необходимыми трансформациями




Может ли кто-нибудь помочь мне сделать это?
    

Ответы

Ответ 1

В качестве примера использования matrix в SVG трансформациях привожу работы мастеров
"old school"
Эти файлы на моем ПК находятся давно. Поэтому буду благодарен тому, кто укажет ссылку
на первоисточник.   








Ещё примеры:

Example #1  

Example #2


Ответ 2

Translate(tx, ty) "перемещение" можно записать в виде матрицы: 

  1  0  tx
  0  1  ty
  0  0  1   


Scale(sx, sy) "увеличение" в виде матрицы: 

  sx  0  0
  0  sy  0
  0   0  1


Rotate(a)  "вращение" 

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


Вращение rotate(a, cx, cy) в комбинации с перемещением  translation(-cx, cy), с последующим
перемещением назад в (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


Если вы просто умножите это на матрицу translation, вы получите:

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


Что соответствует матрице SVG-преобразования записью в одну строку: 

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

В вашем случае это: матрица (0,866, -0,5 0,5 0,866 8,84 58,35).   

Если вы включите преобразование масштаба (sx, sy), матрица будет:

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


Обратите внимание, что это предполагает, что вы делаете преобразования в том порядке,
в котором вы их написали.

Примечание переводчика:

Связанный ответ от @Grundy 

Я уверен что, чем больше разнообразных ответов с разной методикой изложения, тем
лучше и будет легче разобраться в этом довольно сложном вопросе. 

Полезные ссылки для более углубленного изучения вопроса:  

Затерянная документация или transform: matrix3d   

Матрица преобразований 

Transformation matrix