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" </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" </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Find More here on that Topic: geeksforgeeks.org/d3-js-interpolatetransformsvg-function-2/ […]
… [Trackback]
[…] Here you will find 87422 additional Information to that Topic: geeksforgeeks.org/d3-js-interpolatetransformsvg-function-2/ […]