使用 JQuery 动画旋转 SVG 元素

Question

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

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

Answer 1

检查这个 JSFiddle 我为你做的。您可以添加一个额外的 class 并将动画放在那个额外的 class.

上

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

使用 JQuery 动画旋转 SVG 元素

Animate Spin SVG Element with JQuery

javascript

jquery

svg

jquery-animate