如何使用jQuery触发SVG中id为reverse的animate反向动画？

你有一个SVG汉堡图标动画，点击图标会播放正向动画后显示菜单；现在需要点击菜单关闭按钮时，隐藏菜单的同时触发SVG的反向动画，将图标恢复初始状态，且在WordPress环境下使用无$符号的jQuery。

解决方案 #

要触发SVG中id为reverse的动画，需直接调用该动画元素的beginElement()方法，这是W3C标准的SVG动画API，能可靠触发指定动画。修改后的完整jQuery代码如下：

// 点击汉堡图标：触发SVG正向动画，延迟显示菜单
jQuery('.hb').click(function() {
    setTimeout(function() {
        jQuery('.body-menu').fadeIn();
    }, 200);
});

// 点击关闭按钮：隐藏菜单并触发SVG反向动画
jQuery('#btn_menu_close').click(function() {
    jQuery('.body-menu').fadeOut();
    // 获取并触发reverse动画
    const reverseAnim = document.getElementById('reverse');
    if (reverseAnim) {
        reverseAnim.beginElement();
    }
});

补充说明 #

1. 点击.hb时，SVG的正向动画已经通过自身的begin="click"属性自动触发，无需额外编写触发代码，只需保留延迟显示菜单的逻辑即可。
2. 若需要让菜单隐藏动画和SVG反向动画的时序更协调，可以在菜单隐藏完成后再触发动画，示例如下：

jQuery('#btn_menu_close').click(function() {
    jQuery('.body-menu').fadeOut(300, function() {
        // 菜单隐藏完成后执行反向动画
        const reverseAnim = document.getElementById('reverse');
        if (reverseAnim) {
            reverseAnim.beginElement();
        }
    });
});

3. 也可以用jQuery选择器获取SVG动画元素，写法为jQuery('#reverse')[0].beginElement()，效果与原生DOM方法一致。

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