Mastering SVG

translate

The translate transform moves the SVG element by the specified x and y coordinates. A translation changes the origin of the element's coordinate system.

The y coordinate is an optional argument and is assumed to be equivalent to the x argument if it's not provided.

The following sample shows three equivalent circles. The first circle is not transformed in any way. The second is transformed with a single argument (10), which moves it by 10 on the x axis and 10 on the y axis. The third is translated by "75" pixels on the x plane and 0 pixels on the y plane. The underlying element has equivalent metrics in each case but they display differently.

Why not just move the elements, you might ask. For one thing, this is useful in dynamic ...