Chapter 6 : Coordinate Systems and Transformations

Extract :

Elementary Transformations

We have learned now how to displace <use> elements by their x and y attributes and how to design the corresponding groups
 in order to do that quite comfortable.
 But a simple element displacement from one location to another can't be the end of the road. 

What if we want to rotate, mirror or change the size of an element? 
For this task the SVG specification gives us a very common powerful feature - the transform attribute. 
That transform attribute can be applied to most graphics elements, i.e. elements, that cause graphics to be drawn onto the canvas.
It can be applied as well to the <g> element. Here is the transform attribute's syntax:

   transform = "translate(tx [ ty])
                    rotate(angle [cx cy])
                    scale(sx [sy])
                    skewX(angle)
                    skewY(angle)"

We will discuss the individual components of the transform attribute separately now. 
I prefer to illustrate the transformations with a more complex element, 
i.e. an <use> element referring to a group. 
But we do bear in mind that the transform attribute is applicable to the other graphics elements too.

We will use the binding screw here for the subsequent examples. 
Assume that we defined the screw's geometry regarding its red local coordinate system.

Figure 6-13. The screw and its coordinate system

( view this picture as svg )

Here is the code for our screw

  <defs>
    <linearGradient  id="zylinderShade" x2="0%" y2="50%" spreadMethod="reflect">
      <stop offset="0%" stop-color="darkslategray"/>
      <stop offset="100%" stop-color="white"/>
    </linearGradient>
    <g id="screw" stroke="black" stroke-linejoin="round" >
      <path fill="url(#zylinderShade)" d="M0,-36 -4,-40 -4,40 0,36 z 
                                          M-32,-36 -28,-40 -28,40 -32,36 z 
                                          M-4,-40 -28,-40 -28,40 -4,40 z" />
      <path fill="url(#zylinderShade)" d="M0,-16 120,-16 120,16 0,16 z 
                                          M120,-16 120,16 124,12 124,-12 120,-16 z" />
      <path stroke-width="0.4" fill="none" stroke-linecap="round" 
            stroke-dasharray="24 12 4 12" d="M-40,0 132,0" />
      <path stroke-width="0.4" fill="none" stroke-linecap="round" 
            d="M0,-12 124,-12 M0,12 124,12" />
    </g>
  </defs>

If we simply instantiate the screw's group via

  <use xlink:href="#screw" />

the screw's local coordinate system will coincide with the blue reference coordinate system. 
With this starting situation we will analyse now the effects of the individual components of the transform attribute. 
With that model it might become somewhat clearer, that we rather transform the coordinate system including 
the affiliated 2D-space - with the screw here accidentally in it - than simple graphics elements.