如何用D3.js的transition()复现CSS transform动画效果？

核心问题：SVG与CSS的transform原点差异 #

CSS中元素的transform-origin默认是元素几何中心，但SVG元素的transform默认以**坐标系原点（左上角）**为基准，这是动画效果不符的最常见原因。

正确实现步骤 #

1. 对齐transform原点
   先获取SVG文本元素的边界框，计算中心坐标，将CSS风格的transform转换为SVG兼容的、基于中心的变换格式：

   const textEl = d3.select("text.target");
   const bbox = textEl.node().getBBox();
   const centerX = bbox.x + bbox.width / 2;
   const centerY = bbox.y + bbox.height / 2;
   
   // 从data属性获取起始/结束变换，并转换为SVG中心旋转格式
   const cssStart = textEl.attr("data-start"); // 示例值："rotate(-90deg)"
   const cssFinish = textEl.attr("data-finish"); // 示例值："rotate(0deg)"
   const svgStart = `translate(${centerX},${centerY}) ${cssStart} translate(${-centerX},${-centerY})`;
   const svgFinish = `translate(${centerX},${centerY}) ${cssFinish} translate(${-centerX},${-centerY})`;
   

2. 用D3 transition+attrTween实现插值动画
   确保缓动函数、时长与CSS动画完全匹配，使用d3.interpolateString处理transform字符串的插值：

   textEl
     .transition()
     .duration(1000) // 与CSS动画时长一致，示例为1秒
     .ease(d3.easeOutCubic) // 匹配CSS的ease-out-cubic缓动
     .attrTween("transform", function() {
       return d3.interpolateString(svgStart, svgFinish);
     });
   

3. 额外校验点

   • 确认data-start和data-finish的transform语法与SVG兼容（比如CSS的rotate(-90deg)在SVG中可直接使用，但必须配合中心偏移）
   • 若使用D3 v5及更早版本，缓动函数写法为d3.easeOutCubic（注意大小写，不要写错）
   • 避免在transform中混用CSS的百分比单位（比如translate(50%,50%)），SVG中百分比基于视口而非元素自身，用计算出的绝对中心坐标更可靠

为什么之前的实现不符？ #

• 未处理SVG与CSS的transform原点差异，导致旋转中心不一致，动画路径完全不同
• 直接插值原始的CSS transform值时，SVG会绕左上角旋转，和CSS的中心旋转效果天差地别

内容的提问来源于stack exchange，提问作者smpa01