La función interpolateTransformSvg() en D3.js se usa para devolver la función de interpolador entre dos transformaciones SVG dadas. Luego, al cambiar el valor de k en la función devuelta, se pueden establecer diferentes propiedades de transformación.
Sintaxis:
interpolateTransformSvg(a, b);
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- a: Es la propiedad transform del SVG.
- b: Es la propiedad transform del SVG.
Devoluciones: Devuelve la función interpoladora.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Antes de hacer clic:
Después de hacer clic:
