by Observable

外觀

變換內插 ​

CSS 和 SVG 變換的內插器。內插方法由 CSS 標準化：請參閱 動畫矩陣分解。

interpolateTransformCss(a, b) ​

js
d3.interpolateTransformCss("translateY(12px) scale(2)", "translateX(30px) rotate(5deg)")(0.5) // "translate(15px,6px) rotate(2.5deg) scale(1.5,1.5)"

範例 · 原始碼 · 傳回由 a 和 b 表示的兩個 2D CSS 變換之間的內插器。每個變換都分解為平移、旋轉、x 傾斜和縮放的標準表示；然後對這些組成變換進行內插。

interpolateTransformSvg(a, b) ​

js
d3.interpolateTransformSvg("skewX(-60)", "skewX(60) translate(280,0)") // "translate(140,0) skewX(0)"

範例 · 原始碼 · 傳回由 a 和 b 表示的兩個 2D SVG 變換之間的內插器。每個變換都分解為平移、旋轉、x 傾斜和縮放的標準表示；然後對這些組成變換進行內插。