mozilla

Compare Revisions

Basic Transformations

Change Revisions

Revision 427723:

Revision 427723 by Jeremie on

Revision 428259:

Revision 428259 by ethertank on

Title:
Basic Transformations
Basic Transformations
Slug:
Web/SVG/Tutorial/Basic_Transformations
Web/SVG/Tutorial/Basic_Transformations
Tags:
SVG, SVG:Tutorial
"SVG", "SVG:Tutorial"
Content:

Revision 427723
Revision 428259
nn7    <div>
8      {{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/
 >Clipping_and_masking")}}
9    </div>
n8      {{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clippinn
>g_and_masking") }} 
9    </p>
10    <p>
11      Now we're ready to start distorting our beautiful images. B11      Now we're ready to start distorting our beautiful images. B
>ut first, let's formally introduce the {{ SVGElement("g") }} elem>ut first, let's formally introduce the {{SVGElement("g")}} elemen
>ent. With this helper, you can assign properties to a complete se>t. With this helper, you can assign properties to a complete set 
>t of elements. Actually, that's its only purpose. An example:>of elements. Actually, that's its only purpose. An example:
n31    <pre>n31    <pre class="brush: xml">
n46    <pre>n46    <pre class="brush: xml">
n68      All the above transformations can be expressed by a 3x3 tran68      All the above transformations can be expressed by a 3x3 tra
>nsformation matrix. To combine several transformations, one can s>nsformation matrix. To combine several transformations, one can s
>et the resulting matrix directly with the <code>matrix(A1, A2, B1>et the resulting matrix directly with the <code>matrix(A1, A2, B1
>, B2, C1, C2)</code> transformation. Detailed information about t>, B2, C1, C2)</code> transformation. Detailed information about t
>his property can be found in the <a class="external" href="http:/>his property can be found in the <a href="http://www.w3.org/TR/SV
>/www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Recome>G/coords.html#TransformMatrixDefined">SVG Recomendation</a>.
>ndation</a>. 
n76    <pre>n76    <pre class="brush: xml">
n90    <pre>n90    <pre class="brush: xml">
t100    <p>t100    <div>
101      {{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clippin101      {{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/
>g_and_masking") }}>Clipping_and_masking")}}
102    </p>102    </div>
103    <p>
104      {{ languages( { "fr": "fr/SVG/Tutorial/Transformations_de_b
>ase", "ja": "ja/SVG/Tutorial/Basic_Transformations"} ) }} 
105    </p>

Back to History