This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The flipX()
method of the DOMMatrixReadOnly
interface creates a new matrix being the result of the original matrix flipped about the x-axis.
Syntax
DOMMatrix.flipX()
Return value
Returns a DOMMatrix
containing a new matrix being the result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by DOMMatrix(-1, 0, 0, 1, 0, 0)
. The original matrix is not modified.
Examples
This SVG contains two paths in the shape of a triangle, both drawn to the same position. Note that the x co-ordinate of the viewBox attribute is negative, showing us content from both sides of the x-axis.
<svg width="100" height="100" viewBox="-50 0 100 100">
<path fill="red" d="M 0 50 L 50 0 L 50 100 Z" />
<path id="flipped" fill="blue" d="M 0 50 L 50 0 L 50 100 Z" />
</svg>
This JavaScript first creates an identity matrix, then uses the `flipX()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. The red triangle is left in place.
const flipped = document.getElementById('flipped');
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute('transform', flippedMatrix.toString());
Screenshot | Live sample |
---|---|
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2019/03/19/16556/8db7f80d005e52e107d07c2074dd2bb6/flipX.png|class=internal]] |
Specifications
Specification | Status | Comment |
Geometry Interfaces Module Level 1The definition of 'DOMMatrixReadOnly.flipX()' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flipX()
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 33 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 33 |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
DOMMatrixReadOnly.flipX() by Mozilla Contributors is licensed under CC-BY-SA 2.5.