使用 JQuery 动画旋转 SVG 元素

【问题标题】：Animate Spin SVG Element with JQuery使用 JQuery 动画旋转 SVG 元素
【发布时间】：2016-04-26 15:07:09
【问题描述】：

我想为这个 SVG 元素的变换制作动画。我希望这能奏效：

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

【问题讨论】：

控制台是否出现错误？
@BarryDoyle 没有错误

标签： javascript jquery svg jquery-animate

【解决方案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');
});

【讨论】：

我必须添加“transformation-origin”来获得我正在寻找的旋转效果，但这很有效。谢谢。