Скрыть SVG рисунок при анимации

Stack Overflow на русском Asked by Rocco _ Rina on November 30, 2021

Пытаюсь создать анимацию в которой одно изображение скрываю, а второе показываю.

Получается так, что при скрытии, рисунок не отображается, но пространство, которое оно занимает остается.

Может кто подскажет, как скрыть изображение так, чтобы от него следов не оставалось, но без удаления, т.к анимация циклическая.

@font-face {
  font-family: "SemiBold";
  src: url("../../project/fonts/VictorMono-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "ExtraLightItalic";
  src: url("../../project/fonts/VictorMono-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "architect";
  src: url("../../project/font/architect.ttf") format("truetype");
}
.header {
  display: flex;
  flex-direction: row;
}

.header {
  justify-content: space-between;
  font-family: SemiBold;
  align-items: center;
  font-size: 20pt;
  border-bottom: white 2px solid;
  padding-bottom: 1%;
}

body {
  background-color: black;
}

a {
  text-decoration: none;
  color: white;
}

.forMainText {
  display: none;
  text-align: center;
  font-family: ExtraLightItalic;
  margin-top: 5%;
  color: white;
  font-size: 20pt;
  margin-bottom: -10%;
}

.forMainText2 {
  display: none;
  text-align: center;
  font-family: ExtraLightItalic;
  margin-top: 5%;
  color: white;
  font-size: 20pt;
  margin-bottom: -41%;
}

.secBlock {
  border-top: black 2px solid;
  background-color: white;
}

.js-hidden {
  display: none;
}

/*# sourceMappingURL=css.css.map */

<html>
    <head>
        <title>Mint Fox</title>
        <link rel="shortcut icon" href="../project/img/logo.png" type="image/x-icon">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система"> 
        <link rel="stylesheet" href = "../project/sass/css.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="../project/anime-master/lib/anime.min.js"></script>
        
        <style type="text/css">
            .str0 {stroke:#9D9E9E;stroke-width:12.13;stroke-miterlimit:22.9256}
            .str1 {stroke:#B8161B;stroke-width:12.13;stroke-miterlimit:22.9256}
            .fil0 {fill:none;}
            .str8 {stroke:#6244B3;stroke-width:8.84;stroke-miterlimit:22.9256}
            .str4 {stroke:#A293DD;stroke-width:8.84;stroke-miterlimit:22.9256}
            .str5 {stroke:#A293DD;stroke-width:6.63;stroke-miterlimit:22.9256}
            .str3 {stroke:#AEB1EE;stroke-width:6.63;stroke-miterlimit:22.9256}
            .str6 {stroke:#2B2A29;stroke-width:14.36;stroke-miterlimit:22.9256}
            .str2 {stroke:#2B2A29;stroke-width:12.15;stroke-miterlimit:22.9256}
            .str7 {stroke:#403383;stroke-width:12.15;stroke-miterlimit:22.9256}
            .fil1 {fill:none;}
          </style>
    </head>
    <body>
        <div class="container">
            <div class="forheader">
                <div class="header">
                    <a class="elemInHeader" href="../">
                        КОНТАКТЫ
                    </a>
                    <a class="elemInHeader" href="../">
                        О НАС
                    </a>
                    <div href="../">
                        <img src="../project/imgs/logo2.png" width="200" height="100">
                    </div>
                    <a class="elemInHeader" href="../">
                        СПЕКТАКЛИ
                    </a>
                    <a class="elemInHeader" href="../">
                        ТРУППА
                    </a>
                </div> 
                <div class="partBeforeHeader">
                    <div class="forMainText" id="forMainText">
                        Особые форматы концертов классической<br> музыки для погружения <br> в незабываемые впечатления!
                    </div>
                    <div class="forMainText2">
                        Живой звук, известные шедевры классической музыки,<br> игра света и тени и мастерство музыкантов перенесут Вас в иное измерение,<br> где не существует привычных правил восприятия!
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"  version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 6062.34 2321"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0 str0" d="M278.34 2316.12c68.88,-51.02 88.58,-123.26 164.31,-224.09 72.27,-96.21 142.54,-195.63 217.26,-287.6 41.27,-50.79 193.55,-256.25 250.8,-260.13 27.67,-25.54 392.46,54 420.25,58.7 172.52,29.15 174.11,19.81 342.72,-8.67l33.65 -3.72c244.97,-25.69 145.86,-22.11 288.29,-105.79 44.62,-26.22 220.48,-119.65 224.67,-154.66 -48.28,-78.58 -244.05,63.69 -277.64,85.11 -121.89,77.75 -209.9,84.4 -368.19,58.67 -6.16,-21.57 -1.92,-1.93 5.11,-10.62 51.17,-34.86 102.7,-68.09 159.41,-102.64 107.34,-65.39 330.58,-396.89 273.79,-473.56 -80.86,-24.17 -171.76,145.36 -199.98,211.15 -43.39,101.15 -100.15,171.69 -225.51,201.77 -59.25,52.15 77.25,-100.18 98.58,-129.77 37.57,-52.12 73.58,-79.36 75.71,-149.04 1.53,-49.8 21.59,-387.11 3.94,-399.3 -81.43,-53.99 -115.13,236.09 -117.87,283.37 -7.36,127.25 -37.38,176.5 -142.3,278.8 -31.29,38.91 13.61,-120.56 -1.68,-162.28 -9.41,-25.68 -57.6,-80.48 -77.38,-105.63 -30.28,-38.49 -123.32,-200.13 -168.56,-199.9 -39.3,38.64 36.77,180.49 60.11,215.24 67.22,100.05 71.84,98.24 66.35,222.45l-13.84 37.11 -16.72 37.63c-289.94,14.52 -514.08,-173.65 -176.25,-136.17 59.33,6.59 190.88,0.36 143.61,-61.05 -30.56,-30.63 -205.9,-42 -271.48,-44.07 -98.6,-3.11 -168.81,51.75 -222.61,85.2 -88.22,54.85 -164.23,239.52 -239.01,328.93 -84.5,101.02 -176.28,207.89 -269.35,300.78 -45.76,45.67 -272.56,247.73 -315.67,270.86"/>
  <path class="fil0 str0" d="M6050.46 4.97c-66.59,46.61 -835.93,572.72 -912.59,669.89 -83.47,105.8 -353.01,472.13 -443.45,511.7l-61.77 -21.01c-62.6,-21.58 -75.19,-34.99 -156.87,-20.62l-307.58 144.71c36.94,83.16 211.7,-7.54 280.11,-41.54l137.52 19.69c27.28,9.26 64.51,25.03 72.75,49.71 -148.46,40.83 -159.77,112.5 -230.67,219.13 -34.04,51.19 -215.93,202.98 -205.12,241.95 87.46,36.51 203.53,-100.26 242.31,-141.11 117.84,-124.09 77.77,-189.77 195.06,-200.57 20.03,-10.07 14.72,-7.26 33.74,-5.58 -17.66,37.16 -90.74,95.35 -120.05,156.21 -63.73,132.34 -94.12,247.64 -170.72,384.21 -25.54,45.54 -84.35,97.1 -42.04,134.61 114.79,20.01 210.55,-246.37 236.92,-312.55 26.92,-70.87 51.59,-140.9 77.52,-212.1 13.86,-38.05 135.33,-126.88 190.94,-136.19 -5.57,51.59 -141.23,199.06 -158.88,360.59 -2.16,20.32 -76.15,249.66 -120,299.88 -9.4,21.2 -16.71,30.98 8.37,43.84 61.04,34.16 158.2,-195.05 175.38,-273.25 8.96,-40.78 28.58,-172.54 47.44,-199.94 34.28,-49.81 225.71,-263.83 270.15,-266.98l-10.31 104.84 -4.83 160.3c-5.07,36.39 -3.5,82.95 43.11,87.04 51.46,-23.53 26.63,-253.48 40.73,-318.74 9.43,-43.64 48.07,-82.33 65.99,-122.93 40.14,-90.92 14.97,-288.93 136.35,-422.03 30.71,-33.68 674.08,-356.38 699.75,-368.53"/>
  <path class="fil0 str1" d="M1675.81 1598.79c-3.92,72.72 -79.6,256.66 -48.45,330.31 26.51,62.71 67.03,-24.56 69.14,-27.33 12.27,-16.11 14.67,-326.79 -20.68,-302.98z"/>
  <path class="fil0 str1" d="M1687.83 1605.24c-0.22,4.07 14.84,248.78 15,249.16 26.51,62.71 86.47,5.57 87.35,-22.26 0.34,-10.68 -67,-250.71 -102.35,-226.9z"/>
  <path class="fil0 str1" d="M1699.89 1487.31c-20.64,12.05 -26.39,98.52 -20.51,105.71l-5.69 1.32"/>
  <path class="fil0 str1" d="M1679.37 1593.02c44.95,76.34 789.88,167.1 1031.46,154.83 557.87,-28.35 1508.91,-209.61 1743.74,-400.24 12.29,-9.97 74.27,-48.67 111.29,-82.66 0.97,-0.89 30.55,-24.2 41.95,-50.11 8.65,-19.67 10.98,-55.89 10.81,-60.39"/>
  <path class="fil0 str1" d="M4584.75 1145.27c-48.69,-18.96 -55.27,-253.6 -6.63,-248.22 22.14,2.45 33.79,42.67 41.24,113.57 11.14,106.06 -11.45,153.07 -2.6,141.24 8.82,-11.79 -8.5,2.56 -32.01,-6.59z"/>
  <path class="fil0 str1" d="M4618.62 1154.45c-5.37,0.36 61.53,-176.82 71.58,-189.15 7.67,-9.42 41.94,-55 50.37,-23.74 18.31,67.87 -47.55,158.57 -110.16,203.64 -4.52,3.26 -9.57,9.1 -11.79,9.25z"/>
 </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4313.62 1359.61"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil1 str7" d="M7.96 806.14c233.56,82.58 481.58,46.83 663.48,114.62 57.26,21.34 85.22,-20.57 213.68,58.22 8.76,5.37 817.01,115.49 916.2,162.3 17.89,8.44 117.09,21.35 139.12,27.45"/>
  <path class="fil1 str8" d="M1142.83 988.41c137.89,-23.4 102.38,-19.86 241.68,-30.69 407.54,-31.69 624.9,-123.75 1067.98,-134.4 54.56,-1.31 346.35,-28.36 380.38,-42.69 74.83,-31.51 284.66,-17.98 382.77,-24.29 111.27,-7.16 412.25,-43.18 483.77,-84.79 111.48,-64.86 302.3,-83.98 461.54,-49.61 3.59,0.77 84.53,3.72 97.37,-4.29l52.96 -33.05"/>
  <path class="fil1 str2" d="M1577.12 1296.55c111.26,-91.52 151.93,13.89 246.42,-65.76 136.54,0 145.06,-49.02 175.14,-43.57 5.63,14.24 50.34,-12.65 104.24,-7.95 38.53,3.36 87.59,-53.7 137.86,-33.71 0.54,0.21 148.2,-23.8 162.48,-23.19 19.44,0.84 111.95,-30.95 112.82,-25.76 3.87,23.26 118.79,-25.47 138.28,-31.36 62.06,18.73 137.01,-40.14 182.17,-43.13 9.22,-0.61 342.03,-82.76 369.26,-92.3 5.35,-1.87 117.25,-17.29 191.59,-42.77 53.13,-18.21 174.89,-16.56 237.17,-22.08 33.61,-2.98 49.97,-20.39 57.82,-20.39 0,29.84 110.76,-35.21 144.05,-28.34 6.99,-2.39 235.07,-88.33 221.14,-64.85 30.66,12.52 69.62,-37.03 134.62,-26.2 24.86,4.14 66.75,-29.7 83.28,-13.1 14.94,14.99 24.31,-6.15 33.2,3.24"/>
  <path class="fil1 str3" d="M4311.28 297.99c-68.05,57.49 -12.96,-237.49 -152.78,-195.28 -29.85,-6.46 17.25,-36.86 -89.89,-3.68 -44.73,13.85 -79.67,-126.03 -128.43,-87.15 -1.27,-0.18 -66.12,-31.66 -223.81,27.11 -78,29.07 -93.69,122.1 -220.74,169.45 -0.59,0.22 -84.4,-2.93 -164.87,35.04 -89.54,42.25 -64.25,27.07 -157.55,51.3 -2.18,0.57 -69.39,57.74 -173.59,53.44 8.21,54.35 -294.88,94.97 -310.38,55.18 -8.57,-22 -83.14,48.4 -172.74,64.63 -66.28,12 -233.71,56.02 -274.03,80.75 -24.85,15.24 -171.73,17.36 -247.87,38.64 -116.28,32.51 -147.62,-7.07 -280.64,21.64 -21.49,4.64 -253.36,-32.69 -266.48,-35.21 -106.45,-20.45 -226.09,95.36 -300.99,67.45 -25.35,-9.45 -123.24,24.05 -111.98,7.07"/>
  <path class="fil1 str4" d="M21.5 743.67c33.74,-21.75 67.39,-35.62 116.92,-46.65 38.67,-8.61 84.64,3.63 172.34,28.4 34.74,9.81 -5.26,23.98 147.7,20.83 78.89,-1.63 176.38,120.42 280.64,115.93 7.14,-0.31 25.6,3.82 24.62,10.3"/>
  <path class="fil1 str5" d="M236.9 681.84c196.91,-33.2 190.23,24.62 408.65,-22.52 66.48,-14.35 100.48,29.08 178.51,0 0.17,-0.07 54,0.51 52.89,1.91"/>
  <path class="fil1 str6" d="M2885.75 1284.25c128.07,-129.25 601.79,-184.48 861.62,-228.2 57.3,-9.64 171.21,1.16 257.29,-30.91 3,-1.12 132.76,7.3 161.21,-39.3 44.86,-73.5 36.6,-47.65 68.14,-14.29 8.4,8.88 46.7,11.22 62.5,19.44"/>
  <path class="fil1 str3" d="M0.65 416.49c90.06,17.86 110.4,5.89 211.64,-7.73 80.48,-10.83 76.25,-19.36 172.32,-25.54 32.77,-2.11 180.8,-99.12 354.49,-95.54 62.66,1.29 -17.72,41.51 83.7,21.27 14.7,-2.93 5.8,34.15 132.51,-9.28 28.59,-9.8 200.9,-32.66 231.83,19.14 16.63,27.86 147.65,39.21 228.17,81.33 53.94,28.23 46.98,-28.79 165.29,20.83 11.46,4.81 219.95,-32.83 305.68,-32.83 53.17,0 242.46,-40.95 300.34,-53.44 11.97,-2.58 200.37,-11.19 256.02,-21.27 90.31,-16.36 -28.18,54.06 98.47,56.68 73.84,1.52 -2.51,-6.19 42.62,21.49 0.35,0.22 37.4,11.51 41.08,9.42"/>

</g>
</svg>

                </div>
                <div class="secBlock">
                  ujdyfhkl;
                </div>
            </div>
        </div>
        <script>
            anim();
            setInterval(anim, 30000);
            function sayHi() {
                $('.fil0').fadeOut(10);
                $('.fil1').fadeIn(10);
                $('.forMainText2').fadeIn(10000);
                anime({
                    targets: '.fil1',
                    strokeDashoffset: [anime.setDashoffset, 0],
                    easing: 'easeInOutSine',
                    duration: 4500,
                    delay: function(el, i) { return i * 250 },
                    direction: 'alternate',

                });
                $('.forMainText2').fadeOut(3000);
            }

            function anim(){
                $('.fil1').fadeOut(10);
                $('.forMainText').fadeIn(10000);
                $('.fil0').fadeIn(10);
                anime({
                    targets: '.fil0',
                    strokeDashoffset: [anime.setDashoffset, 0],
                    easing: 'easeInOutSine',
                    duration: 4500,
                    delay: function(el, i) { return i * 250 },
                    direction: 'alternate',
    
                });
                $('.forMainText').fadeOut(3000);
                setTimeout(sayHi, 15000);
            }

            
            
           
    </script>
    </body>
</html>

html javascript jquery

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Lex on Does Google Analytics track 404 page responses as valid page views?
Jon Church on Why fry rice before boiling?
Peter Machado on Why fry rice before boiling?
haakon.io on Why fry rice before boiling?
Joshua Engel on Why fry rice before boiling?