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.

Revision 405233 of SVGTransform

  • Revision slug: Web/API/SVGTransform
  • Revision title: SVGTransform
  • Revision id: 405233
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment SVG_ANGLETYPE_ROTATE > SVG_TRANSFORM_ROTATE, different constant names within page, xx_TRANSFORM_xx is form used in Firefox and W3C DocDOM/SVGTransform Web/API/SVGTransform
Tags: 

Revision Content

SVG transform interface

SVGTransform is the interface for one of the component transformations within an {{ domxref("SVGTransformList") }}; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a {{ SVGAttr("transform") }} attribute.

An SVGTransform 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
  • void setMatrix(in {{ domxref("SVGMatrix") }} matrix)
  • void setTranslate(in float tx, in float ty)
  • void setScale(in float sx, in float sy)
  • void setRotate(in float angle, in float cx, in float cy)
  • void setSkewX(in float angle)
  • void setSkewY(in float angle)
Properties
  • readonly unsigned short type
  • readonly float angle
  • readonly {{ domxref("SVGMatrix") }} matrix
Constants
  • SVG_TRANSFORM_UNKNOWN = 0
  • SVG_TRANSFORM_MATRIX = 1
  • SVG_TRANSFORM_TRANSLATE = 2
  • SVG_TRANSFORM_SCALE = 3
  • SVG_TRANSFORM_ROTATE = 4
  • SVG_TRANSFORM_SKEWX = 5
  • SVG_TRANSFORM_SKEWY = 6
Normative document SVG 1.1 (2nd Edition)

Constants

Name Value Description
SVG_TRANSFORM_UNKNOWN 0 The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_TRANSFORM_MATRIX 1 A matrix(…) transformation
SVG_TRANSFORM_TRANSLATE 2 A translate(…) transformation
SVG_TRANSFORM_SCALE 3 A scale(…) transformation
SVG_TRANSFORM_ROTATE 4 A rotate(…) transformation
SVG_TRANSFORM_SKEWX 5 A skewx(…) transformation
SVG_TRANSFORM_SKEWY 6 A skewy(…) transformation

Properties

Name Type Description
type unsigned short The type of the value as specified by one of the SVG_TRANSFORM_* constants defined on this interface.
angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.

For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.
matrix {{ domxref("SVGMatrix") }}

The matrix that represents this transformation. The matrix object is live, meaning that any changes made to the SVGTransform object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on the SVGTransform interface itself) then the type of the SVGTransform changes to SVG_TRANSFORM_MATRIX.

  • For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user.
  • For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1).
  • For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0).
  • For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).
  • For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero.

Methods

Name & Arguments Return Description
setMatrix(in {{ domxref("SVGMatrix") }} matrix) void

Sets the transform type to SVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation. Note that the values from the parameter matrix are copied.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setTranslate(in float tx , in float ty) void

Sets the transform type to SVG_TRANSFORM_TRANSLATE, with parameters tx and ty defining the translation amounts.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setScale(in float sx , in float sy) void

Sets the transform type to SVG_TRANSFORM_SCALE, with parameters sx and sy defining the scale amounts.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setRotate(in float angle, in float cx , in float cy) void

Sets the transform type to SVG_TRANSFORM_ROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setSkewX(in float angle) void

Sets the transform type to SVG_TRANSFORM_SKEWX, with parameter angle defining the amount of skew.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setSkewY(in float angle) void

Sets the transform type to SVG_TRANSFORM_SKEWY, with parameter angle defining the amount of skew.

Exceptions:

  • a {{ domxref("DOMException") }} with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Revision Source

 
<h2 id="SVG_transform_interface">SVG transform interface</h2>
<p><code>SVGTransform</code> is the interface for one of the component transformations within an {{ domxref("SVGTransformList") }}; thus, an <code>SVGTransform</code> object corresponds to a single component (e.g., <code>scale(…)</code> or <code>matrix(…)</code>) within a {{ SVGAttr("transform") }} attribute.</p>
<p>An <code>SVGTransform</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><code>void setMatrix(in {{ domxref("SVGMatrix") }} matrix)</code></li>
          <li><code>void setTranslate(in float tx, in float ty)</code></li>
          <li><code>void setScale(in float sx, in float sy)</code></li>
          <li><code>void setRotate(in float angle, in float cx, in float cy)</code></li>
          <li><code>void setSkewX(in float angle)</code></li>
          <li><code>void setSkewY(in float angle)</code></li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">Properties</th>
      <td>
        <ul>
          <li>readonly unsigned short <code>type</code></li>
          <li>readonly float <code>angle</code></li>
          <li>readonly {{ domxref("SVGMatrix") }} <code>matrix</code></li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">Constants</th>
      <td>
        <ul>
          <li><code>SVG_TRANSFORM_UNKNOWN</code> = 0</li>
          <li><code>SVG_TRANSFORM_MATRIX</code> = 1</li>
          <li><code>SVG_TRANSFORM_TRANSLATE</code> = 2</li>
          <li><code>SVG_TRANSFORM_SCALE</code> = 3</li>
          <li><code>SVG_TRANSFORM_ROTATE</code> = 4</li>
          <li><code>SVG_TRANSFORM_SKEWX</code> = 5</li>
          <li><code>SVG_TRANSFORM_SKEWY</code> = 6</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">Normative&nbsp;document</th>
      <td><a class="external" href="https://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransform" title="https://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransform">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Constants">Constants</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Name</th>
      <th>Value</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_UNKNOWN</code></td>
      <td>0</td>
      <td>The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_MATRIX</code></td>
      <td>1</td>
      <td>A <code>matrix(…)</code> transformation</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_TRANSLATE</code></td>
      <td>2</td>
      <td>A <code>translate(…)</code> transformation</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_SCALE</code></td>
      <td>3</td>
      <td>A <code>scale(…)</code> transformation</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_ROTATE</code></td>
      <td>4</td>
      <td>A <code>rotate(…)</code> transformation</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_SKEWX</code></td>
      <td>5</td>
      <td>A <code>skewx(…)</code> transformation</td>
    </tr>
    <tr>
      <td><code>SVG_TRANSFORM_SKEWY</code></td>
      <td>6</td>
      <td>A <code>skewy(…)</code> transformation</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>type</code></td>
      <td>unsigned&nbsp;short</td>
      <td>The type of the value as specified by one of the SVG_TRANSFORM_* constants defined on this interface.</td>
    </tr>
    <tr>
      <td><code>angle</code></td>
      <td>float</td>
      <td>A convenience attribute for <code>SVG_TRANSFORM_ROTATE</code>, <code>SVG_TRANSFORM_SKEWX</code> and <code>SVG_TRANSFORM_SKEWY</code>. It holds the angle that was specified.<br />
        <br />
        For <code>SVG_TRANSFORM_MATRIX</code>, <code>SVG_TRANSFORM_TRANSLATE</code> and <code>SVG_TRANSFORM_SCALE</code>, <code>angle</code> will be zero.</td>
    </tr>
    <tr>
      <td><code>matrix</code></td>
      <td>{{ domxref("SVGMatrix") }}</td>
      <td>
        <p>The matrix that represents this transformation. The matrix object is live, meaning that any changes made to the <code>SVGTransform</code> object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on the <code>SVGTransform</code> interface itself) then the type of the <code>SVGTransform</code> changes to <code>SVG_TRANSFORM_MATRIX</code>.</p>
        <ul>
          <li>For <code>SVG_TRANSFORM_MATRIX</code>, the matrix contains the a, b, c, d, e, f values supplied by the user.</li>
          <li>For <code>SVG_TRANSFORM_TRANSLATE</code>, e and f represent the translation amounts (a=1, b=0, c=0 and d=1).</li>
          <li>For <code>SVG_TRANSFORM_SCALE</code>, a and d represent the scale amounts (b=0, c=0, e=0 and f=0).</li>
          <li>For <code>SVG_TRANSFORM_SKEWX</code> and <code>SVG_TRANSFORM_SKEWY</code>, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).</li>
          <li>For <code>SVG_TRANSFORM_ROTATE</code>, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<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>setMatrix</strong>(in {{ domxref("SVGMatrix") }} <em>matrix</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_MATRIX</code>, with parameter matrix defining the new transformation. Note that the values from the parameter <code>matrix</code> are copied.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code><strong>setTranslate</strong>(in float <span style="font-style: italic;">tx</span> , in float <em>ty</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_TRANSLATE</code>, with parameters <code>tx</code> and <code>ty</code> defining the translation amounts.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code><strong>setScale</strong>(in float <span style="font-style: italic;">sx</span> , in float <em>sy</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_SCALE</code>, with parameters <code>sx</code> and <code>sy</code> defining the scale amounts.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code><strong>setRotate</strong>(in float <em>angle</em>, in float <span style="font-style: italic;">cx</span> , in float <em>cy</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_ROTATE</code>, with parameter <code>angle</code> defining the rotation angle and parameters <code>cx</code> and <code>cy</code> defining the optional center of rotation.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code><strong>setSkewX</strong>(in float <em>angle</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_SKEWX</code>, with parameter <code>angle</code> defining the amount of skew.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code><strong>setSkewY</strong>(in float <em>angle</em>)</code></td>
      <td><em>void</em></td>
      <td>
        <p>Sets the transform type to <code>SVG_TRANSFORM_SKEWY</code>, with parameter <code>angle</code> defining the amount of skew.</p>
        <p><strong>Exceptions:</strong></p>
        <ul>
          <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting to modify a read only attribute or when the object itself is read only.</li>
        </ul>
      </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>{{ CompatUnknown() }}</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>
Revert to this revision