Revision 736635 of SVGMatrix

<h2 id="SVG_matrix_interface">SVG matrix interface</h2>

<p>Many of SVG's graphics operations utilize 2x3 matrices of the form:</p>

<pre>
[a c e]
[b d f]</pre>

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

<pre>
[a c e]
[b d f]
[0 0 1]
</pre>

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

<h3 id="Interface_overview">Interface overview</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Also&nbsp;implement</th>
   <td><em>None</em></td>
  </tr>
  <tr>
   <th scope="row">Methods</th>
   <td>
    <ul>
     <li>{{ domxref("SVGMatrix") }} <code>multiply(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>translate(in float <em>x</em>, in float <em>y</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>scale(in float <em>scaleFactor</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float <span style="font-style: italic;">scaleFactorX</span>, in float <em>scaleFactorY</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>rotate(in float<code> <em>angle</em>)</code></code></li>
     <li>{{ domxref("SVGMatrix") }} <code>rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>flipY()</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>skewX(in float <em>angle</em>)</code></li>
     <li>{{ domxref("SVGMatrix") }} <code>skewY(in float <em>angle</em>)</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Properties</th>
   <td>
    <ul>
     <li>float <code>a</code></li>
     <li>float <code>b</code></li>
     <li>float <code>c</code></li>
     <li>float <code>d</code></li>
     <li>float <code>e</code></li>
     <li>float <code>f</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Normative&nbsp;document</th>
   <td><a class="external" href="https://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix" title="https://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Properties">Properties</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Name</th>
   <th>Type</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>a</code></td>
   <td>float</td>
   <td>The <em>a</em> component of the matrix.</td>
  </tr>
  <tr>
   <td><code>b</code></td>
   <td>float</td>
   <td>The <em>b</em> component of the matrix.</td>
  </tr>
  <tr>
   <td><code>c</code></td>
   <td>float</td>
   <td>The <span style="font-style: italic;">c</span> component of the matrix.</td>
  </tr>
  <tr>
   <td><code>d</code></td>
   <td>float</td>
   <td>The <em>d</em> component of the matrix.</td>
  </tr>
  <tr>
   <td><code>e</code></td>
   <td>float</td>
   <td>The <em>e</em> component of the matrix.</td>
  </tr>
  <tr>
   <td><code>f</code></td>
   <td>float</td>
   <td>The <em>f</em> component of the matrix.</td>
  </tr>
 </tbody>
</table>

<p>a {{ domxref("DOMException") }} with 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="Methods">Methods</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Name &amp; Arguments</th>
   <th>Return</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><strong>multiply</strong>(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix.</td>
  </tr>
  <tr>
   <td><code><strong>inverse</strong>()</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <p>Return the inverse matrix</p>

    <p><strong>Exceptions:</strong></p>

    <ul>
     <li>a {{ domxref("DOMException") }} with code <code>SVG_MATRIX_NOT_INVERTABLE</code> is raised if the matrix is not invertable.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>translate</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a translation transformation on the current matrix and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>scale</strong>(in float <em>scaleFactor</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>scaleNonUniform</strong>(in float <em>scaleFactorX</em>, in float <em>scaleFactorY</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>rotate</strong>(in float <em>angle</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. (<em>angle</em>&nbsp;is measures in degrees.)</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>rotateFromVector</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <p>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,&nbsp;y) determines whether the positive or negative angle value is used.</p>

    <p><strong>Exceptions:</strong></p>

    <ul>
     <li>a {{ domxref("DOMException") }} with code <code>SVG_INVALID_VALUE_ERR</code> is raised if one of the parameters has an invalid value.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code><strong>flipX</strong>()</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies the transformation [-1&nbsp;0&nbsp;0&nbsp;1&nbsp;0&nbsp;0] and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>flipY</strong>()</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies the transformation [1&nbsp;0&nbsp;0&nbsp;-1&nbsp;0&nbsp;0] and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>skewX</strong>(in float <em>angle</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix.</div>
   </td>
  </tr>
  <tr>
   <td><code><strong>skewY</strong>(in float <em>angle</em>)</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>
    <div>Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix.</div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>9</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>&nbsp;</p>