SVGMatrix

SVG matrix interface

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

JavaScript
[a c e]
[b d f]

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

JavaScript
[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 ? ? ? ? ?

 

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/svgmatrix

API NeedsBrowserCompatibility Reference Référence SVG SVG DOM