SVGSVGElement: phương thức createSVGTransformFromMatrix()
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 SVGSVGElement tạo một đối tượng SVGTransform bên ngoài bất kỳ cây tài liệu nào, dựa trên đối tượng DOMMatrix đã cho.
Cú pháp
js
createSVGTransformFromMatrix(matrix)
Tham số
Giá trị trả về
Một đối tượng SVGTransform, được khởi tạo thành phép biến đổi ma trận đã cho. Đây là phép biến đổi matrix() nếu matrix là 2D, và là phép biến đổi matrix3d() trong các trường hợp khác.
Ví dụ
>Tạo phép biến đổi từ ma trận
html
<svg id="exampleSVG" width="200" height="200">
<rect id="exampleRect" x="50" y="50" width="100" height="50" fill="blue" />
</svg>
js
const svgElement = document.getElementById("exampleSVG");
const rectElement = document.getElementById("exampleRect");
// Tạo ma trận mới
const matrix = svgElement.createSVGMatrix();
matrix.a = 1; // Tỉ lệ x
matrix.d = 1; // Tỉ lệ y
matrix.e = 50; // Dịch chuyển x
matrix.f = 50; // Dịch chuyển y
// Tạo SVGTransform mới từ ma trận
const transform = svgElement.createSVGTransformFromMatrix(matrix);
// Áp dụng phép biến đổi cho hình chữ nhật
rectElement.transform.baseVal.appendItem(transform);
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2> # __svg__SVGSVGElement__createSVGTransformFromMatrix> |