|
SVG MATRIX TRANSFORMATION : JAVASCRIPT BASICS & EXAMPLES Applied within the Adobe SVG Viewer(ASV 3.03) and Internet Explorer Environment (IE6/7/8)
The center point of an element will be used in these examples as the reference for scaling, rotation and skew. Therefore, it remains stable during these
transformations, rather than scooting off in some unfathomable manner. To maintain this reference, the element's bounding box, and an
SVG 'wrapper' element will be employed. |
||
|
Last Updated: 02/26/2009 MATRIX TRANSFORMATION BASICS - This presents the transform matrix value as the preferred transform attribute setting for an element: myElem.setAttribute("transform",myMatrix); myMatrix="matrix(a b c d e f)". The transform matrix value is the most efficient value for transformations; both for performance and modifications. Choosing the example will 'run' the example function, show the related javascript code, and its resultant svg source. MEET THE PLAYERS - To simplify the examples, a few SVG elements have been created and named. Firstly, there's Neo, otherwise known as the SVG document. The Root SVG element is Matrix. The main group is called Zion. Residing within Zion are its children, a transform matrix: a,c,e,b,d,f. Associated with the kids is their 'birthing' bounding box, called Ghost. There is a special element called Oracle, which is the SVG 'wrapper' bounding box for the children. Then, of course, there are "The Machines"... |
|
Javascript Functions |
|
SVG Source |
|||
| ( ↓ drag/drop at border ↓ )Watch out: The Matrix may get you( ↓ drag/drop at border ↓ ) | |||||
|
QUESTIONS AND COMMENTS - You are invited to post comments, suggest
examples, and discuss any related item at the Yahoo group:
SVGdiscovery
Editor's Note: The code herein attempts to concisely present an example or concept,
without regard to error trapping, other validation clutter, or wigetry ;). All code in these examples can be used without restrictions.
|