Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

SVG matrix interface

Many of SVG's graphics operations utilize 2x3 matrices of the form:

[a c e]
[b d f]

which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become:

[a c e]
[b d f]
[0 0 1]

An SVGMatrix object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

Interface overview

Also implement None
Methods
Properties
  • float a
  • float b
  • float c
  • float d
  • float e
  • float f
Normative document SVG 1.1 (2nd Edition)

Properties

Name Type Description
a float The a component of the matrix.
b float The b component of the matrix.
c float The c component of the matrix.
d float The d component of the matrix.
e float The e component of the matrix.
f float The f component of the matrix.

a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting updating a read only attribute or when the object itself is read only.

Methods

Name & Arguments Return Description
multiply(in SVGMatrix secondMatrix) SVGMatrix Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix.
inverse() SVGMatrix

Return the inverse matrix

Exceptions:

  • a DOMException with code SVG_MATRIX_NOT_INVERTABLE is raised if the matrix is not invertable.
translate(in float x, in float y) SVGMatrix
Post-multiplies a translation transformation on the current matrix and returns the resulting matrix.
scale(in float scaleFactor) SVGMatrix
Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix.
scaleNonUniform(in float scaleFactorX, in float scaleFactorY) SVGMatrix
Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix.
rotate(in float angle) SVGMatrix
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. (angle is measures in degrees.)
rotateFromVector(in float x, in float y) SVGMatrix

Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.

Exceptions:

  • a DOMException with code SVG_INVALID_VALUE_ERR is raised if one of the parameters has an invalid value.
flipX() SVGMatrix
Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix.
flipY() SVGMatrix
Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix.
skewX(in float angle) SVGMatrix
Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix.
skewY(in float angle) SVGMatrix
Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? ? 9 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

 

Document Tags and Contributors

 Contributors to this page: jwhitlock, fscholz, jhartz, kscarfone, Sheppy, Yukoba, Jeremie
 Last updated by: jwhitlock,