blob: 998987d6e0d8df473207a922ea3cf2890028314f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: SVGMatrix
slug: Web/API/SVGMatrix
translation_of: Web/API/SVGMatrix
---
<div>{{APIRef("SVG")}}{{deprecated_header}}</div>
<p>Many of SVG's graphics operations utilize 2x3 matrices of the form:</p>
<pre class="brush:plain">[a c e]
[b d f]</pre>
<p>which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become:</p>
<pre class="brush:plain">[a c e]
[b d f]
[0 0 1]
</pre>
<p>An <strong><code>SVGMatrix</code></strong> object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.</p>
<div class="warning">
<p><strong>Warning:</strong> SVG 2 replaced the <code>SVGMatrix</code> interface by the more general {{domxref("DOMMatrix")}} and {{domxref("DOMMatrixReadOnly")}} interfaces.</p>
</div>
<h2 id="Properties">Properties</h2>
<dl>
<dt>{{domxref("SVGMatrix.a")}}</dt>
<dd>A float representing the <em>a</em> component of the matrix.</dd>
<dt>{{domxref("SVGMatrix.b")}}</dt>
<dd>A float representing the <em>b</em> component of the matrix.</dd>
<dt>{{domxref("SVGMatrix.c")}}</dt>
<dd>A float representing the <em>c</em> component of the matrix.</dd>
<dt>{{domxref("SVGMatrix.d")}}</dt>
<dd>A float representing the <em>d</em> component of the matrix.</dd>
<dt>{{domxref("SVGMatrix.e")}}</dt>
<dd>A float representing the <em>e</em> component of the matrix.</dd>
<dt>{{domxref("SVGMatrix.f")}}</dt>
<dd>A float representing the <em>f</em> component of the matrix.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("SVGMatrix.multiply()")}}</dt>
<dd>Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.inverse()")}}</dt>
<dd>Returns the inverse matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.translate()")}}</dt>
<dd>Post-multiplies a translation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.scale()")}}</dt>
<dd>Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.scaleNonUniform()")}}</dt>
<dd>Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.rotate()")}}</dt>
<dd>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.rotateFromVector()")}}</dt>
<dd>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>. 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.</dd>
<dt>{{domxref("SVGMatrix.flipX()")}}</dt>
<dd>Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.flipY()")}}</dt>
<dd>Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.skewX()")}}</dt>
<dd>Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
<dt>{{domxref("SVGMatrix.skewY()")}}</dt>
<dd>Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
</dl>
<h2 id="Exceptions">Exceptions</h2>
<p>A {{domxref("DOMException")}} with the code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting updating a read-only attribute or when the object itself is read-only.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.SVGMatrix")}}</p>
|
