You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
수많은 SVG 그래픽 오퍼레이션은 아래와 같은 2X3 행열을 활용하고있다.
[a c e] [b d f]
아래와같이 3x3 행렬은 행렬간의 계산을 위한 목적으로 확장되어 만들어졌다.
[a c e] [b d f] [0 0 1]
Warning: SVG 2 replaced the SVGMatrix
interface by the more general DOMMatrix
and DOMMatrixReadOnly
interfaces.
Properties
SVGMatrix.a
- A float representing the a component of the matrix.
SVGMatrix.b
- A float representing the b component of the matrix.
SVGMatrix.c
- A float representing the c component of the matrix.
SVGMatrix.d
- A float representing the d component of the matrix.
SVGMatrix.e
- A float representing the e component of the matrix.
SVGMatrix.f
- A float representing the f component of the matrix.
Methods
SVGMatrix.multiply()
- Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix as
SVGMatrix
. SVGMatrix.inverse()
- Returns the inverse matrix as
SVGMatrix
. SVGMatrix.translate()
- Post-multiplies a translation transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. SVGMatrix.scale()
- Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. SVGMatrix.scaleNonUniform()
- Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. SVGMatrix.rotate()
- Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. SVGMatrix.rotateFromVector()
- Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. 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. SVGMatrix.flipX()
- Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as
SVGMatrix
. SVGMatrix.flipY()
- Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as
SVGMatrix
. SVGMatrix.skewX()
- Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix as
SVGMatrix
. SVGMatrix.skewY()
- Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix as
SVGMatrix
.
Exceptions
A DOMException
with the code NO_MODIFICATION_ALLOWED_ERR
is raised when attempting updating a read-only attribute or when the object itself is read-only.
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGMatrix' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGMatrix | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support 9 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.