svg.js, click event does not fire when animation is running

Question

I try to bind a click event on symbol in a svg. When a element spinns in the symbol, the click event is not fired, stops/pauses the animation, the click event fires.

How can i fix this, that the click events get fired every time i click on it, regardless if the animations run or not.

.as-console-wrapper{
display: none!important;
}

<!doctype html>
<html lang="de">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Schematic</title>


    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    <!--<script src="assets/js/vue.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>


    <script>

        const color = {
            blue: "#007bff",
            indigo: "#6610f2",
            purple: "#6f42c1",
            pink: "#e83e8c",
            red: "#dc3545",
            orange: "#fd7e14",
            yellow: "#ffc107",
            green: "#28a745",
            teal: "#20c997",
            cyan: "#17a2b8",
            white: "#fff",
            gray: "#6c757d",
            "gray-dark": "#343a40",
            primary: "#007bff",
            secondary: "#6c757d",
            success: "#28a745",
            info: "#17a2b8",
            warning: "#ffc107",
            danger: "#dc3545",
            light: "#f8f9fa",
            dark: "#343a40"
        };



        let baseColor = {
            background: "#000",
            "fill-opacity": 0.5,
            stroke: color.white,
            "stroke-width": 1,
            "stroke-opacity": 0.5
        };

        let pipeColor = {
            fill: color.blue,
            opacity: 1
        };

        let pumpColor = {
            fill: color.gray,
            "fill-opacity": 0.8
        }

        document.addEventListener("DOMContentLoaded", () => {

            // parent drawing
            let draw = SVG().addTo('#schematic').size("100%", 500);



            let pumpGroup = draw.symbol();


            pumpGroup.click(function () {
                alert("Pump clicked!");
            });


            let height = 50;
            let radius = 30;

            let chase = pumpGroup.rect(80, height).attr(baseColor).move(0, 0);  // 520, 370

            let motor1 = pumpGroup.circle(radius).attr(pumpColor).move(45, (height / 2) - radius / 2);   // 525, 380
            let motor2 = pumpGroup.circle(radius).attr(pumpColor).move(5, (height / 2) - radius / 2);   // 565, 380

            let fan1 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(940, 240); //.animate().rotate(360, 256 + 940, 256 + 240).loop();
            let fan2 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(140, 240);
            // 


            // 1 = slave, 2 = master
            let fant1Runner = fan1.animate(1500).ease("-").rotate(360, 256 + 940, 256 + 240).loop().timeline().pause();
            let fant2Runner = fan2.animate(1500).ease("-").rotate(360, 256 + 140, 256 + 240).loop().timeline().pause();


            setInterval(() => {

                fant2Runner.play();
                fant1Runner.play();

                setTimeout(() => {
                    fant2Runner.pause();
                    fant1Runner.pause();
                }, 2500)

            }, 5000);


            draw.use(pumpGroup).move(10, 10).click(() => {
                alert("Clicked on pump!");
            });



        });

    </script>


</head>

<body>
    <div id="app">
        <div id="schematic"></div>
    </div>
</body>

</html>

For demsonstation i create a minimal snippet. The fans start spinning after 5sec, run then for 2.5 sec and stops.

As written above, when the fans spin, no click fires.

Thanks for any advise.

This doesn't seem related to svg.js but more to the fact, that the click event is just not fired by the browser. Maybe because the browser is busy rerendering the use-element (because you canimate its reference). That however is just an idea. Did you try without the use? — Fuzzyma, Feb 06 '21 at 23:53
I have created a more minimalistic example on [GitHub](https://github.com/svgdotjs/svg.js/issues/1190#issuecomment-773856152). Without the `.use`, the event fireing works fine. Animation & `.click` works fine on a simple `.rect` — Marc, Feb 06 '21 at 23:57
Then this is your answer. Animating the content of a use seem to block the click from getting dispatched. You can try and overlay the use with an invisible element to catch the click on that one — Fuzzyma, Feb 06 '21 at 23:59
Yeah, but there must be a reason for it why `.use` behaves like that. I dont think this in purpose done. A event should get dispatched regardless of what the element is doing.The idea with a transparent overlay seems like a good hotfix. Thanks! — Marc, Feb 07 '21 at 00:02
Feel free to create a bug report for the browsers. Maybe it is known already — Fuzzyma, Feb 07 '21 at 00:04

svg.js, click event does not fire when animation is running

0 Answers0