Transformations in SVG allow you to manipulate an SVG element in a variety of ways, including scaling, rotating, skewing, and translating (which looks like moving the element, but isn't exactly that). Using transformations allows you to manipulate the SVG without changing its intrinsic values (for example, height, width, x, and y) which is important when you're manipulating elements in a dynamic way.
This section will introduce you to the common transformation functions one by one, with examples of each.
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...