CSS transition控制SVG元素transform旋转在火狐Safari不生效如何解决

你遇到的差异本质是不同浏览器的渲染队列合并策略不同：Chrome会将setTimeout中的样式变更和节点插入的初始渲染拆分为两个独立渲染帧，而Firefox和Safari会合并短时间内的DOM操作和样式变更，直接应用最终的transform值，因此看不到过渡效果。同时部分版本的Safari对SVG原生transform属性的CSS transition支持存在缺陷，更推荐使用CSS transform属性控制SVG变换。

插入节点后主动读取节点的布局属性，强制浏览器完成初始状态的渲染后再应用最终样式，不需要依赖不可靠的固定时长setTimeout：

const node = getSVGElement();
node.classList.add('svg-animation');
// 用CSS transform设置初始值，替代SVG transform属性
node.style.transform = 'rotate(0deg)';

const parent = document.getElementById('someDiv');
parent.appendChild(node);

// 主动读取布局属性强制触发重排，保证浏览器先记录初始状态
void node.offsetWidth;

// 直接应用最终变换，不需要延迟
node.style.transform = `rotate(${someOtherValue}deg)`;

对应CSS无需改动：

.svg-animation {
    transition: transform 0.5s ease-in-out;
}

直接使用浏览器原生的Web Animations API实现动画，不需要手动处理重排时机、不需要额外添加CSS类，兼容性覆盖所有现代浏览器（Safari 13.1+、Firefox 48+均支持）：

const node = getSVGElement();
const parent = document.getElementById('someDiv');
parent.appendChild(node);

// 直接定义并执行动画
node.animate(
  [
    { transform: 'rotate(0deg)' }, // 起始状态
    { transform: `rotate(${someOtherValue}deg)` } // 结束状态
  ],
  {
    duration: 500, // 对应0.5s时长
    easing: 'ease-in-out',
    fill: 'forwards' // 动画结束后保留最终状态
  }
);

• 使用CSS transform控制SVG变换时，角度值必须添加deg单位，否则样式不生效
• 不要依赖固定时长的setTimeout来控制渲染时机，不同设备的刷新帧率不同，固定延迟会出现偶现的动画失效问题

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