jQuery onclick SVG ID不显示警报

Question

我有这个SVG动画，点击ID会激活警报。不幸的是没有任何反应，控制台显示没有关于此代码的错误

<script>
    $(function () {
        $(".overlay #medical").on('click', function () {
            console.log('testing - click');
        });
    });
</script>

有任何建议如何使这个工作？

Answer 1

jQuery（目前）没有完全支持SVG。您应该使用原生JavaScript：

nodejs

Answer 2

使用以下代码解决：

    var anim;
    var elem = document.getElementById('bodymovin')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        rendererSettings: {
            progressiveLoad: false
        },
        path: 'data_large.json'
    };
    anim = bodymovin.loadAnimation(animData);

    var lookingForLinks = true;
    setTimeout(addLinksToSvgAnim, 1000);

    function addLinksToSvgAnim() {
        if (lookingForLinks) {
            let medicalG = document.getElementById("medical");
            let foodG = document.getElementById("food");
            let collabG = document.getElementById("collab");
            let volunteersG = document.getElementById("volunteers");
            let projectsG = document.getElementById("projects");

            if (medicalG && foodG && volunteersG && projectsG) {
                lookingForLinks = false;
                medicalG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/medical-aid";
                });
                foodG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/humanitarian-aid";
                });
                collabG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/our-story/partners";
                });
                volunteersG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/get-involved";
                });
                projectsG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
            }
            setTimeout(addLinksToSvgAnim, 1000);
        }
    }