D3.js interpolateTransformSvg() Function
Last Updated :
23 Jul, 2020
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 >
< 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:
Share your thoughts in the comments
Please Login to comment...