Re: SVG 1.1 Spec Rec - 7.6 The Transform Attribute

Hi Thomas, Ian,

I think I started this.
Back in December of 2004 I read a web tutorial on SVG ( )
and found the *Concatenation of Transformations* section confusing
    "The elementary transformations of the transform attribute are 
evaluated from *right* to *left*".

I have since been trying to de-confuse myself. 

You  might be able to determine whether I am still confused :-
What I did not know was that at one level transformation matrices were 
indeed being evaluated right to left and at the same time at a different 
conceptual level the evaluation of the transform attribute content was 
left to right (order provided).

I think that the SVG 1.1 spec 7.6 The Transform Attribute explains 
things clearly, correctly and at an appropriate level, and the user 
agents that I am familiar with  (Batik, ASV6) have implemented the spec 

Thomas, your explanation makes perfect sense to me.


Thomas DeWeese wrote:

> Hi Ian,
>     The basic problem is that the transform attribute describes the
> transformation from one coordinate system to another not the
> transformation of the geometry (this would be problematic as it
> wouldn't work for groups).
>     I'll go through your example using the coordinate system not
> the geometry.
> Ian Brown wrote:
> > Take a rectangle at (0,0) of width and height 30.
>     Take an inital coordinate system (C1)
> > Translate it to (200, 0)
> > We then have a rectangle at (200, 0) of width and height 30.
>     Create a new coordinate system (C2) translated by 200,0.  We now
> have a coordinate system with it's origin at location 200,0 in
> the original coordinate system (C1).
> > Now rotate that rectangle by 45 degrees (about 0,0).
>     Now create another new coordinate system (C3) by rotating the
> cooridinate system (C2) by 45 degrees around it's origin, which is
> at location 200,0 in the original coordinate system (C1).
> >(remember the rectangle now has an upper left at 200,0 and lower 
> right at 230,30)
> > What do we expect? We expect the upper left and upper right points of
> > the square to lie along the 45 diagonal passing through 0,0
> > i.e. the rotation is about 0,0 not 200,0. The upper left conner will be
> > a distance of 200 from 0,0.
>     Now define a rectangle in the final coordinate system (C3), such
> that it starts at 0,0 and has a width/height of 30.
> > That is not what Adobe SVG or Amaya does.
>     The above is what Adobe, Amaya, Batik, and Mozilla do.
> Please see the attached SVG that illustrates the coordinate
> systems involved.
> > The spec should not be compromised by the implementation.
> > Interpreting the spec according to "matrix order rules" (backwards to
> > English?) is interpreting the spec based on using a matrix based
> > implementation. This is highly confusing, and inappropriate.
> > Further since the matrix order for pre-concatenation is opposite to
> > post-concatenation the spec would have specify pre or post rules.
>     The problem is that you are trying to apply the transformation
> to the geometry not to the coordinate system.  The transform attribute
> defines the coordinate system that the rectangles coordinates are
> evaluated in it does not define a transformation of the rectangle.
> ----
> <svg width="400" height="400"
>       xmlns:xlink=""
>       xmlns=""
>       viewBox="-20 -20 390 390">
>     <symbol id="axis" stroke-width="2"
>             viewBox="0 0 100 100" overflow="visible"
>             stroke-linecap="round" >
>            <line x1="0" y1="0" x2="90" y2="0"/>
>            <line x1="0" y1="0" x2="0"  y2="90"/>
>            <path d="M0 100 l3-10 h-6z" stroke="none"/>
>            <path d="M100 0 l-10,3 v-6z" stroke="none"/>
>     </symbol>
>     <g stroke="black" fill="black">
>        <use x="0" y="0" width="300" height="300"
>             xlink:href="#axis"/>
>        <text x="10" y="30" font-size="20" stroke="none">C1</text>
>     </g>
>     <g transform="translate(200, 0)" stroke="blue" fill="blue">
>        <use x="0" y="0" width="300" height="300"
>             xlink:href="#axis"/>
>        <text x="50" y="30" font-size="20" stroke="none">C2</text>
>     </g>
>     <g transform="translate(200, 0) rotate(45)"
>        stroke="green" fill="green">
>        <use x="0" y="0" width="300" height="300"
>             xlink:href="#axis"/>
>        <text x="50" y="30" font-size="20" stroke="none">C3</text>
>        <rect x="0" y="0" width="30" height="30"
>              fill="purple" fill-opacity="0.5"/>
>     </g>
> </svg>

Important - This e-mail and the information that it contains may be
confidential, legally privileged and protected by law.  Access by the
intended recipient only is authorised.  Any liability (in negligence or
otherwise) arising from any third party acting, or refraining from acting,
on any information contained in this e-mail is hereby excluded.  If you are
not the intended recipient, please notify the sender immediately and do not
disclose the contents to any other person, use it for any purpose, or store
or copy the information in any medium.  Copyright in this e-mail and
attachments created by us belongs to STR Gresham Business Forms Ltd the
also asserts the right to be identified as such and object to any misuse.

Received on Wednesday, 26 January 2005 16:43:26 UTC