SVG Transformation

The SVG transformation can be defined as to mutate the single SVG shape element or the set of SVG elements. The SVG transformation upholds Rotate, Translate, Scale, and Skew (Shear). SVG also contains an attribute called “Transform,” which supports the transformation.

An SVG transformation may consist of the following functions. They are-

Rotate

The rotate holds the three options, such as angle, the angle of rotation, cx that is the center of rotation for the x-axis,and cy is the center of rotation for the y-axis. If you don’t declare the cx and cy, then by default, it takes the existing origin of the coordinate system. For Example- rotate (90)

Translate

The translate contains two options, i.e., tx, the translation along with the x-axis, and ty is the translation along with the y-axis. For Example- translate (60, 60).

Scale

The scale function consists of two options- sx and sy. The sx defines the scaling factor along with the x-axis, and sy determines the scaling factor along with the y-axis. If you don’t declare the sy, then it will take the value of sx by default. It is optional to use. For Example- scale (30).

Skew

This function of transformation is also known as a Shear function. It only has a single option- skew-angle, is an angle along with the x-axis for the skewX andthe angle along with the y-axis for the skewY. For Example- skewX (30).

Example

Here, we have an example of SVG rectangle with translate, shown in below code-

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400">
         <rect x = "50"
            y = "50"
            width = "200"
            height = "200"
            fill = "purple"
            transform = "translate(40 40)">
</rect>
</svg>
</body>
</html>

Output

After the successful execution of the above code, you will get the following result:

You can declare the multiple transformation for the single SVG element with the help of space used for separation. If you declare more than one value, then the transformation can be applied to the values in a sequential order (One by one). It is shown in the below code-

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "50"
            y = "50"
            width = "80"
            height = "80"
            fill = "purple"
            transform = "translate(60 60) rotate(45)">
 </rect>
 </svg>
</body>
</html>

Output

After the execution of the above example, you will get the following output:

You can also use the transformation for the set of shapes elements as shown in below code-

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400">
<g transform = "translate(60,60) rotate(30)">
<rect x = "30"
               y = "30"
               width = "80"
               height = "40"
               fill = "purple">
</rect>
<circle cx = "0"
        cy = "0"
         r = "30"
         fill = "black"/>
</g>
</svg>
</body>
</html>

Output

After the execution of the above example, you will get the following output:

Here, we have another example to elaborate the scaling and rotation with the help of transformation. It is shown in the below steps-

Step 1: First you need to create an SVG graphics with 400 width and 400 height.

<svg width = “400” height = “400”> </svg>

Step 2: Now, you are required to create a set of SVG.

<svg width = “400” height = “400”>
<g ></g>
</svg>

Step 3: Now, draw a rectangle with 80 length and 60 height and fill this shape with black color as shown in below code:

<svg width = “400” height = “400”>
<g>
<rect x = “40”
y = “40”
width = “80”
height = “60”
fill = “black”>
</rect>
</g>
</svg>

Step 4: Now, you need to draw a circle of 20 radius and fill it with the yellow color. It is given in below code:

<svg width = “400” height = “400”>
<g>
<rect x= “40”
Y = “40”
Width = “80”
Height = “60”
Fill = “black”>
</rect>
<circle cx = “0”
cy = “0”
r = “30”
fill = “yellow”>
</g>
</svg>

Step 5: Now, add the transform attribute and also attach the translate and rotate function. It is shown in below code:

<svg width = “400” height = “400”>
<g transform = “translate(50, 50) rotate(30)”>
<rect x = “30”
y = “30”
width = “60”
height = “60”
fill = “black”>
</rect>
<circle cx = “0”
cy = “0”
r = “30”
fill = “yellow” />
</g>
</svg>

Step 6: After executing the previous steps, you need to create a html file named svg_transform.html and accommodate all the above given SVG codes shown below:

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
         body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
<svg width = "400" height = "400">
<g transform = "translate(50,50) rotate(30)">
<rect x = "30"
            y = "30"
      width = "60"
      height = "60"
      fill = "black">
</rect>
<circle cx = "0"
        cy = "0"
        r = "30"
        fill = "yellow"/>
</g>
</svg>
</div>
</body>
</html>

Output

After the execution of the above example, you will get the following output:

Transformation with D3.js

You can create an SVG image or graphic with the help of D3.js by following the below given steps:

Step 1: First, create a “svgcontainer” to store the SVG image as shown in below code:

<div id = “svgcontainer”></svg>

Step 2: In this step, you are required to draw a SVG image or graphic as explained in below code:

var width = “400”;
var height = “400”;
var svg = d3.select (“#svgcontainer”)
.append(“svg”)
                .attr(“width”, width)
                .attr(“height”, height);

Step 3: Now, you need an SVG group element and declare all the attributes of translate and rotate. It is defined in the below code:

var group = svg.append(“g”).attr(“transform”,  “translate(50, 50) rotate(45)”);

Step 4: In this step, you will create an SVG shape (rectangle) and affix it within the SVG element group as determined below:

var rect = group
       .append(“rect”)
          .attr(“x”, 80)
          .attr(“y”, 80)
          .attr(“width”, 80)
          .attr(“height”, 60)
          .attr(“fill”, “magenta”)

Step 5: Now, you are required to draw anther shape (circle) and affix it within the SVG group element as shown in below code:

var circle = group
       .append(“circle”)
          .attr(“cx”, 45)
          .attr(“cy”, 45)
          .attr(“r”, 60)
          .attr(“fill”, “purple”)

Example

Here, we have discussed an example to elaborate the above concept:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>
   <body>
      <div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 400;
            var height = 400;
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);
            var group = svg.append("g")
               .attr("transform", "translate(50, 50) rotate(45)");
            var rect = group.append("rect")
               .attr("x", 80)
               .attr("y", 80)
               .attr("width", 80)
               .attr("height", 60)
               .attr("fill", "green")
            var circle = group
               .append("circle")
               .attr("cx", 45)
               .attr("cy", 45)
               .attr("r", 50)
               .attr("fill", "purple")
         </script>
      </div>
   </body>
</html>

Output

After the successful execution of the above example code, you will get the following output:

Transform Library

D3.js library helps you to manage the transformation without creating the transform of the attributes randomly. The transform library facilitates you to manage all types of transformations. Transform library contains some methods such as scale(), rotate(), translate(), transform(), etc. You can also attach the D3-transform in your html webpage with the help of following given code:

<script src = “http://d3.js.org/d3.v4.min.js”></script>
<script src = “d3-transform.js”></script>
Here, an example is given below to define the transform code:
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
      .append(“g”)
       .attr(“transform”, my_transform);