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

Ответ 1

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

1  0  tx
0  1  ty
0  0  1

Масштаб (sx, sy) можно записать в виде матрицы:

sx  0  0
0  sy  0
0   0  1

Поворот (a) можно записать в виде матрицы:

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

Поворот (a, cx, cy) - это комбинация трансляции на (-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

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

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

В вашем случае это: matrix(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)

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

Ответ 2

Сначала введите элемент g, используя document.getElementById, если он имеет атрибут id или какой-либо другой соответствующий метод, затем вызовите consolidate, например

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

Ответ 3

Может быть полезно:

1. Прямая демонстрация того, как найти действительные координаты преобразованных точек

2. Реализация принятого ответа:

   function multiplyMatrices(matrixA, matrixB) {
       let aNumRows = matrixA.length;
       let aNumCols = matrixA[0].length;
       let bNumRows = matrixB.length;
       let bNumCols = matrixB[0].length;
       let newMatrix = new Array(aNumRows);
   
       for (let r = 0; r < aNumRows; ++r) {
           newMatrix[r] = new Array(bNumCols);
   
           for (let c = 0; c < bNumCols; ++c) {
               newMatrix[r][c] = 0;
   
               for (let i = 0; i < aNumCols; ++i) {
                   newMatrix[r][c] += matrixA[r][i] * matrixB[i][c];
               }
           }
       }
   
       return newMatrix;
   }
   
   let translation = {
       x: 200,
       y: 50
   };
   let scaling = {
       x: 1.5,
       y: 1.5
   };
   let angleInDegrees = 25;
   let angleInRadians = angleInDegrees * (Math.PI / 180);
   let translationMatrix = [
       [1, 0, translation.x],
       [0, 1, translation.y],
       [0, 0, 1],
   ];
   let scalingMatrix = [
       [scaling.x, 0, 0],
       [0, scaling.y, 0],
       [0, 0, 1],
   ];
   let rotationMatrix = [
       [Math.cos(angleInRadians), -Math.sin(angleInRadians), 0],
       [Math.sin(angleInRadians), Math.cos(angleInRadians), 0],
       [0, 0, 1],
   ];
   let transformMatrix = multiplyMatrices(multiplyMatrices(translationMatrix, scalingMatrix), rotationMatrix);
   
   console.log('matrix(${transformMatrix[0][0]}, ${transformMatrix[1][0]}, ${transformMatrix[0][1]}, ${transformMatrix[1][1]}, ${transformMatrix[0][2]}, ${transformMatrix[1][2]})');