如何使用jQuery的animate方法实现SVG的缩放、旋转动画？

嘿，我来帮你搞定这个问题！你遇到的情况很常见——jQuery 2.x的默认animate方法并不支持直接对transform属性进行动画处理，而且SVG元素的transform属性在浏览器中的处理逻辑和普通HTML元素还有些差异，所以你那段代码自然不会生效。下面给你几个实用的解决方案：

方法1：用jQuery animate的step函数手动处理动画 #

jQuery的animate允许我们通过自定义step函数，实时把一个数值型的过渡值转换成transform样式。这种方法不需要额外插件，兼容性也不错：

缩放动画示例 #

$("#svg").animate({
  // 自定义一个数值属性作为过渡载体
  scaleValue: 0.4
}, {
  duration: 400,
  step: function(now) {
    // 实时把过渡值转换成CSS transform
    $(this).css('transform', `scale(${now})`);
    // 如果是旧浏览器或需要严格遵循SVG属性，也可以直接操作SVG的transform属性：
    // $(this).attr('transform', `scale(${now})`);
  }
});

旋转动画示例 #

$("#svg").animate({
  rotateValue: 180
}, {
  duration: 800,
  step: function(now) {
    $(this).css('transform', `rotate(${now}deg)`);
  }
});

如果需要同时实现缩放+旋转的组合动画，可以这样写：

$("#svg").animate({
  scaleValue: 0.4,
  rotateValue: 180
}, {
  duration: 600,
  step: function(now, fx) {
    let scale = fx.prop === 'scaleValue' ? now : $(this).data('currentScale') || 1;
    let rotate = fx.prop === 'rotateValue' ? now : $(this).data('currentRotate') || 0;
    
    $(this).data(`current${fx.prop.charAt(0).toUpperCase() + fx.prop.slice(5)}`, now);
    $(this).css('transform', `scale(${scale}) rotate(${rotate}deg)`);
  }
});

方法2：用CSS过渡+jQuery切换类（更简洁高效） #

如果你的动画逻辑比较简单，推荐用CSS过渡配合jQuery的addClass/removeClass来实现，这种方式性能更好，代码也更简洁：

首先定义CSS过渡类：

.svg-animate {
  transition: transform 400ms ease;
}
.svg-scaled {
  transform: scale(0.4);
}
.svg-rotated {
  transform: rotate(180deg);
}

然后给SVG元素加上基础过渡类，再用jQuery切换动画类：

// 先给SVG加上过渡基础类
$("#svg").addClass("svg-animate");

// 触发缩放动画
$("#svg").addClass("svg-scaled");

// 如果需要反向动画，移除类即可
// $("#svg").removeClass("svg-scaled");

注意事项 #

• 你的SVG设置了viewBox="0 0 1 1"，缩放时要注意坐标系的问题，如果出现显示异常，可以调整viewBox或者配合transform-origin属性来控制动画原点。
• 部分旧浏览器对SVG的CSS transform支持有限，如果遇到兼容性问题，优先使用操作SVG原生transform属性的方式（即方法1中注释的attr写法）。

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