SVGTransformList: createSVGTransformFromMatrix() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Phương thức createSVGTransformFromMatrix() của giao diện SVGTransformList tạo một đối tượng SVGTransform được khởi tạo với biến đổi kiểu SVG_TRANSFORM_MATRIX và có các giá trị là ma trận đã cho.

Các giá trị từ tham số ma trận được sao chép; tham số ma trận không được áp dụng trực tiếp làm SVGTransform::matrix.

Cú pháp

createSVGTransformFromMatrix(matrix)

Tham số

matrix: Một đối tượng DOMMatrix; ma trận biến đổi.

<svg width="200" height="200">
  <rect width="100" height="100" fill="blue" />
</svg>

const svgElement = document.querySelector("svg");
const rectElement = svgElement.querySelector("rect");

// Access the transform list of the <rect> element
const transformList = rectElement.transform.baseVal;

// Create a DOMMatrix object for a rotation transformation
const rotationMatrix = new DOMMatrix();
rotationMatrix.a = Math.cos(Math.PI / 4); // 45-degree rotation
rotationMatrix.b = Math.sin(Math.PI / 4);
rotationMatrix.c = -Math.sin(Math.PI / 4);
rotationMatrix.d = Math.cos(Math.PI / 4);

// Create an SVGTransform object from the matrix
const svgTransform = transformList.createSVGTransformFromMatrix(rotationMatrix);

// Append the new transformation to the transform list
transformList.appendItem(svgTransform);

console.dir(svgTransform); // Output: SVGTransform { type: 1, matrix: SVGMatrix, angle: 0 }