使用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'); 
});