D3.js interpolateTransformSvg()函数

D3.js 中的interpolateTransformSvg()函数用于返回两个给定 SVG 变换之间的插值器函数。然后通过改变返回函数中 k 的值，可以设置不同的变换属性。

句法：

interpolateTransformSvg(a, b);

参数：该函数接受上面提到的两个参数，如下所述：

• a：是SVG的transform属性。
• b：是SVG的transform属性。

返回：它返回插值函数。

下面给出了上述函数的几个例子。

示例 1：

  
  
  Document




  
  
  
  
    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))
 

输出：

示例 2：

  
  
  Document




  D3.interpolateTransformSvg()
  
  
    
    
  
  Clickme
  
  
   
  
    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);
  

输出：

点击前：

点击后：