Get introduced to the transformation functions and their workings on SVG.


Transformation is an attribute of SVG that helps in transforming one or more SVG elements. It can take one or more of the following values:

  • Translate
  • Rotate
  • Scale
  • Skew

Let’s explain them one by one through examples.


Translate is an important functionality in D3.js and is used to move the SVG elements inside the webpage. It takes two values, namely x and y. The x value translates the SVG element along the x-axis, while y translates the SVG element along the y-axis.

Let’s take a dive into the following code to see the transform function in action.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy