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!
