DOMMatrixReadOnly: flipY() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available in Web Workers.
Phương thức flipY() của giao diện DOMMatrixReadOnly tạo một ma trận mới là kết quả của ma trận gốc được lật quanh trục y. Điều này tương đương với việc nhân ma trận với DOMMatrix(1, 0, 0, -1, 0, 0). Ma trận gốc không bị thay đổi.
Cú pháp
flipY()
Tham số
Không có.
Giá trị trả về
Một DOMMatrix.
Ví dụ
Lật một tam giác
Trong ví dụ này, SVG chứa hai đường dẫn hình tam giác giống hệt nhau; cả hai đều được vẽ có cùng kích thước và vị trí. Hộp xem có giá trị y âm cho thấy nội dung từ cả hai phía của trục y. Điều này cho phép tam giác được lật nằm trong vùng xem sau khi biến đổi.
HTML
<svg height="200" width="100" viewBox="0 -100 100 200">
<path fill="red" d="M 0 0 L 100 0 L 50 100 Z" />
<path fill="blue" d="M 0 0 L 100 0 L 50 100 Z" id="flipped" />
</svg>
JavaScript
JavaScript tạo một ma trận đơn vị, sau đó sử dụng phương thức flipY() để tạo một ma trận mới, sau đó được áp dụng lên tam giác xanh, đảo ngược nó qua trục y. Tam giác đỏ được giữ nguyên.
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrix();
const flippedMatrix = matrix.flipY();
flipped.setAttribute("transform", flippedMatrix.toString());
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipy |