Open In App

D3.js interpolateTransformSvg() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The interpolateTransformSvg() function in D3.js is used to return the interpolator function between two given SVG transforms. Then by changing the value of k in returned function different transform property can be set.

Syntax:

 interpolateTransformSvg(a, b);

Parameters: This function accepts two parameters as mentioned above and described below:

  • a: It is the transform property of the SVG.
  • b: It is the transform property of the SVG.

Returns: It returns the interpolator function.

Below given are a few examples of the above function.

Example 1:




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
</style>
<body>
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src = "https://d3js.org/d3.v4.min.js">
  </script>
  <script>
    console.log(d3.interpolateTransformSvg(
  "skewX(30)",
  "skewX(10) translate(10, 0)"
)(1))
    console.log(d3.interpolateTransformSvg(
  "skewX(30)",
  "skewX(10) translate(10, 0)"
)(0.5))
    console.log(d3.interpolateTransformSvg(
  "skewX(30)",
  "skewX(10) translate(10, 0)"
)(0.8))
    console.log(d3.interpolateTransformSvg(
  "skewX(30)",
  "skewX(10) translate(10, 0)"
)(2))
 </script>
</body>
</html>


Output:

Example 2:




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
</style>
<body>
  D3.interpolateTransformSvg()
  <svg class="box" 
       width="300px" 
       height="200px">
  
    <rect class="box1" 
          width="150px" 
          height="100px"
          fill="green" 
          stroke="black"
          stroke-width="2">
    </rect>
  </svg>
  <button>Clickme</button>
  <!--fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js">
   </script>
  <script>
    let box=document.querySelector("rect");
    let btn=document.querySelector("button");
    let interpolateFunc=d3.interpolateTransformSvg(
      "skewX(60)",
      "skewY(30) translate(10, 0)"
  )(0.5);
  func=()=>{
    box.setAttribute("transform", interpolateFunc)
  }
  btn.addEventListener("click", func);
  </script>
</body>
</html>


Output:

Before click:

After click:



Last Updated : 23 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads