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: