Translate transformation

In translate transformation, you can place a group of graphic objects at a specific place using the x and y attributes with theelement.

Moving a graphic with use

Using theelement, you can move the graphic object to a specific place.

Example:

Explanation:

In the above example, there is a rectangle at the upper left corner of the grid and redraw it with the upper left corner at coordinates (80, 80).

Moving the coordinate system with translation

The translate specification picks up the entire grid and moves it to a new location on the canvas.

In translation, the x and y values are converted to an attribute like transform="translate(x-value, y-value)". The translate term is used for move.

Example