SVG Transform Translate

Translate

The translation is an elementary displacement transformation.

Syntax:
 translate(tx, ty)
 tx x-coordinate of displacement
 ty y-coordinate of displacement

Here we apply the translate transformation to the screw group's instance, exactly to the local origin of this group.

   <use xlink:href="#screw" transform="translate(100,130)" />

Figure 6-14. Translate the screw

( view this picture as svg )

Easy, isn't it? So you might ask now what the difference of the translate transformation
to the use of the x- and y- attributes is.
Obviously seems

   <use xlink:href="#screw" transform="translate(100,130)" />

to be identical to 

   <use xlink:href="#screw" x="100" y="130" />

Yes, you are right. So why do we need something complex like transforms? 
We will understand that later, when we had a look at the other elementary transforms and need to combine them. 
So please be patient and simply accept the necessity of the translate transformation for now.

But we should also understand the effect of a combination of the x- and y- attributes 
and the translate transformation.

   <use xlink:href="#screw" transform="translate(100,130)" x="130" y="-160" />

Figure 6-15. Translate and x y attributes

( view this picture as svg )

The effect we have now, is that the screw is translated first to the coordinates (100,130) 
and subsequently displaced by (130,-160) to the end location (230,-30). 
To yield the end position of the elements local coordinate system formally we can simply add the coordinates as in

 Xlocal = tx + x
 ylocal = ty + y

In this formulas we can exchange the addends without harm, i.e.

 Xlocal =x +  tx
 ylocal =y +  ty

will give us the same result. But this means we can also exchange the coordinate values to

   <use xlink:href="#screw" transform="translate(130,-160)" x="100" y="130" />

Figure 6-16. Same result with other combination

( view this picture as svg )

As you see we yield the expected end position of (230,-30) here too. 
So we are not surprised to hear that the following elements produce identical output.

   <use xlink:href="#screw" transform="translate(130,-160) translate(100,130)" />
   <use xlink:href="#screw" transform="translate(100,130) translate(130,-160)" />
   <use xlink:href="#screw" transform="translate(230,-30)" />
   <use xlink:href="#screw" x="230" y="-30" />

It is quite simple but also somewhat confusing to use both the x- and y- attributes and the translate transformation. 
So it is best to avoid this generally, 
but there may be situations to use this effect deliberately as a benefit.

Although the sequence of these both displacements is of no importance here,  the SVG specification states:

The transform attribute is applied to an element before processing any other coordinate or length values supplied for that element.
With that we have a predefined sequence of
perform the translate transformation.
apply the x- and y- attributes.

This was also taken into account with the examples above.