Матрица поворотного преобразования SVG

Question

Я проанализировал атрибут преобразования из элемента в файле SVG, например, rotate(45,30,50), и я хотел бы преобразовать его в матричную форму.Я искал его, и все, что я мог найти, это только для rotate(a) без координат, которые выглядят так [cos(a) sin(a) -sin(a) cos(a) 0 0]

Может ли кто-нибудь показать мне, как преобразовать rotate(angle, x , y) в матричную форму?

Answer 1

Матрицы вращения могут описывать только вращения примерно на (0, 0), поэтому вам придется использовать перевод.

РЕДАКТИРОВАТЬ См. this JSFiddle .Он рисует прямоугольник, определенный со смещением, шириной и высотой, повернутый вокруг точки поворота.Интересной частью являются последние 10 строк или около того, где вычисляются значения для offsetX и offsetY.Получив их, вы можете построить свой перевод и матрицы вращения.Затем просто умножьте перевод на вращение, и вы получите свой окончательный результат.К сожалению, Javascript не предлагает никаких функций матрицы, поэтому, если вы не предоставите свой код, это все, что я могу сделать

КАК СДЕЛАНА МАТРИЦА ПЕРЕВОДА

1   0   offsetX
0   1   offsetY
0   0      1

КАК СДЕЛАНА МАТРИЦА ВРАЩЕНИЯ

cos   -sin    0
sin    cos    0
 0      0     1

Answer 2

Я нашел более простой способ получить матрицу преобразования элемента SVG.Используя метод SVG element getCTM(), я могу получить матрицу преобразования элемента, включая вращение, перемещение и все остальное.

Answer 3

Чтобы получить матрицу SVG-преобразования из поворота с точкой вращения,

проверьте этот вопрос ответ

как вычислить SVG-матрицу преобразования из поворота с точкой вращения