svg.js，动画运行时不触发点击事件

编程问答 2022-05-27

问题描述

我尝试在 svg 中的符号上绑定点击事件。 当一个元素在符号中旋转时，点击事件不会被触发，停止/暂停动画，点击事件被触发。

我该如何解决这个问题，每次点击它时都会触发点击事件，无论动画是否运行。

.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 + 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>

对于 demsonstation，我创建了一个最小的片段。 风扇在 5 秒后开始旋转，然后运行 ​​2.5 秒并停止。

如上所述，当风扇旋转时，不会触发点击。

感谢您的建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alertalertanimationanimationanimationclickclickeventseventseventssvg.js