调整屏幕大小时，我的svg元素会混乱并失去位置

Question

我通过结合使用一些SVG元素和html制作了动画。当浏览器最大化时，它们在不同的屏幕尺寸上表现良好，但是当我手动调整尺寸时，它们会争先恐后，并在某个时候开始消失。我不知道如何让他们留在原地。谁能给我一个线索？谢谢。

这是JavaScript代码：

<script>

        /*AnimeJS*/
        var functionBasedDuration = anime({
          targets: '#functionBasedDuration .el1',
          translateX: 600,
          direction: 'alternate',
          loop: false,
          delay:2500,   
          duration: function(el, i, l) {
            return 3200 + (i * 5000);
          }
        }); 

        functionBasedDuration = anime({
          targets: '#functionBasedDuration .el2',
          translateX: 800,
          direction: 'alternate',
          loop: false,
          delay:2800,
          duration: function(el, i, l) {
            return 3200 + (i * 5000);
          }
        }); 

        functionBasedDuration = anime({
          targets: '#functionBasedDuration .el3',
          translateX: 1000,
          direction: 'alternate',
          loop: false,
          delay:3100,
          duration: function(el, i, l) {
            return 3200 + (i * 5000);
          }
        }); 

        functionBasedDuration = anime({
          targets: '#functionBasedDuration .el4',
          translateX: 1200,
          direction: 'alternate',
          loop: false,
          delay:3400,
          duration: function(el, i, l) {
            return 3200 + (i * 5000);
          }
        }); 

        /*upper icons*/


        var CSStransforms = anime({
          targets: '#increase .el',
          rotate: '1turn',
          delay: 4500
        });

        var CSStransforms = anime({
          targets: '#rocket .el',
          rotate: '1turn',
            delay: 5500
        });

        var CSStransforms = anime({
          targets: '#bulb .el',
          rotate: '1turn',
            delay: 6500
        });

        var CSStransforms = anime({
          targets: '#browser .el',
          rotate: '1turn',
            delay: 7500
        });



        /*Tween Lite*/
        var join = $('#divCirc');
        TweenLite.to(join, 3, {height: "140",width: "140px", left:"50%", opacity: .5, ease:Power3.easeOut});
        TweenLite.to(join, .8, {height: "70",width: "70px",opacity: 1, top:"120px", left:"120px", delay:1.5, ease:Power4.easeIn});


        var firstMainCol= $('#firstMainCol')
        firstMainCol.css('opacity',0);
        TweenLite.to(firstMainCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(9);

        var secondMainCol= $('#secondMainCol')
        secondMainCol.css('opacity',0);
        TweenLite.to(secondMainCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(9.5);

        var thirdMainCol= $('#thirdMainCol')
        thirdMainCol.css('opacity',0);
        TweenLite.to(thirdMainCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(10);

         $('#transparentRect2').on('click',rocket('#rocketFirstCol','#rocketSecondCol','#rocketThirdCol'));
         $('#transparentRect3').on('click',bulb('#bulbFirstCol','#bulbSecondCol','#bulbThirdCol'));
         $('#transparentRect4').on('click',browser('#browserFirstCol','#browserSecondCol','#browserThirdCol'));

        function rocket(RocketTxtId1,RocketTxtId2,RocketTxtId3){
                var rocketFirstCol= $(RocketTxtId1)
                rocketFirstCol.css('opacity',0);
                TweenLite.to(rocketFirstCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1);

                var rocketSecondCol= $(RocketTxtId2)
                rocketSecondCol.css('opacity',0);
                TweenLite.to(rocketSecondCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);

                var rocketThirdCol= $(RocketTxtId3)
                rocketThirdCol.css('opacity',0);
                TweenLite.to(rocketThirdCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);
        } 

        function bulb(bulbTxtId1,bulbTxtId2,bulbTxtId3){
                bulbFirstCol= $(bulbTxtId1)
                bulbFirstCol.css('opacity',0);
                TweenLite.to(bulbFirstCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1);

                bulbSecondCol= $(bulbTxtId2)
                bulbSecondCol.css('opacity',0);
                TweenLite.to(bulbSecondCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);

                bulbThirdCol= $(bulbTxtId3)
                bulbThirdCol.css('opacity',0);
                TweenLite.to(bulbThirdCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);
        } 

        function browser(browserTxtId1,browserTxtId2,browserTxtId3){
                browserFirstCol= $(browserTxtId1)
                browserFirstCol.css('opacity',0);
                TweenLite.to(browserFirstCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1);

                browserSecondCol= $(browserTxtId2)
                browserSecondCol.css('opacity',0);
                TweenLite.to(browserSecondCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);

                browserThirdCol= $(browserTxtId3)
                browserThirdCol.css('opacity',0);
                TweenLite.to(browserThirdCol, 3, {y:"-260", opacity: 1, ease:Power3.easeOut}).delay(1.5);
        } 


                                /* Toogling main text */
        $('#increase, #rectIncrease, #transparentRect1').on('click', function () {
            viewText('.textIncrease');
        } );
        $('#rocket, #rectRocket, #transparentRect2').on('click', function(){
            viewText('.textRocket');
        });
        $('#bulb, #rectBulb, #transparentRect3').on('click', function(){
            viewText('.textBulb');
        });
        $('#browser, #rectBrowser,#transparentRect4 ').on('click', function(){
            viewText('.textBrowser');
        });

        function viewText(textType) {
            $('.textImage').removeClass('active');
            $('.textImage').addClass('inactive');
            $(textType).removeClass('inactive');
            $(textType).addClass('active');
        }
    </script>

这是html和css代码的codepen链接：https://codepen.io/jcrr1985/pen/dKqoRQ

任何建议都会受到赞赏。