The createSVGTransformFromMatrix() method of the SVGSVGElement interface creates an SVGTransform object outside of any document trees, based on the given DOMMatrix object.
createSVGTransformFromMatrix(matrix)matrixA DOMMatrix object representing the initial matrix for the transform.
An SVGTransform object, initialized to the given matrix transform. It is a matrix() transform if the matrix is 2D, and a matrix3d() transform otherwise.
<svg id="exampleSVG" width="200" height="200">
<rect id="exampleRect" x="50" y="50" width="100" height="50" fill="blue" />
</svg>const svgElement = document.getElementById("exampleSVG");
const rectElement = document.getElementById("exampleRect");
// Create a new matrix
const matrix = svgElement.createSVGMatrix();
matrix.a = 1; // Scale x
matrix.d = 1; // Scale y
matrix.e = 50; // Translate x
matrix.f = 50; // Translate y
// Create a new SVGTransform from the matrix
const transform = svgElement.createSVGTransformFromMatrix(matrix);
// Apply the transform to the rectangle
rectElement.transform.baseVal.appendItem(transform);