使用JQuery动画旋转SVG元素

Question

我想动画这个SVG元素的变换。我希望这工作：

$(this).find('polygon').animate({ 
    transform: "rotate(360)" 
}, 5000); 

Answer 1

检查此JSFiddle我为你制造。您可以添加一个额外的类并将该动画放在该额外的类上。

.chevron.rotate { 
    -ms-transform: rotate(360deg); /* IE 9 */ 
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ 
    transform: rotate(360deg); 
} 

，然后做到这一点在你的JavaScript：

$('.rotate-btn').on('click', function() { 
    $('.chevron').addClass('rotate'); 
});