Comment empiler et animer 2 chemins svg?

Question

Je voudrais animer mon logo en remplissant un cercle d'eau et en déplaçant mon logo à l'intérieur du cercle. J'ai 2 chemins de svg séparés. Un d'eau et deuxième de mon logo. Lorsque j'essaie de les animer en ajoutant div #banner, je suis à la fois animé mais le logo est "hors de vue". J'ai essayé d'ajouter l'index z mais cela n'a pas aidé. Voici mon code:

.logo{z-index:1000; 
 
    position: relative;} 
 
    
 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #b7c6ce; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width:300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
     z-index:-1; 
 
    } 
 
    
 
    @keyframes fillAction { 
 
     0% { 
 
      transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
      transform: translate(0, -5px); 
 
     } 
 
    } 
 
    @keyframes waveAction { 
 
     0% { 
 
      transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
      transform: translate(0, 0); 
 
     } 
 
    }

<div id="banner"> 
 
     <div class="fill"> 
 
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
 
       <path fill="none" class="logo" viewBox="0 0 150 150" style="width:150px;height:150px;" stroke="#047F63" stroke-miterlimit="10" d="M200.922,388.703c-6.49,3.878-13.178,6.828-20.265,9.046 
 
      c-11.806,3.683-22.87,5.527-33.191,5.527c-17.342,0-33.564-3.592-48.683-10.784c-15.128-7.188-28.309-16.69-39.554-28.488 
 
      c-11.254-11.812-20.103-25.363-26.556-40.662c-6.452-15.31-9.678-31.074-9.678-47.296c0-18.813,3.128-35.877,9.403-51.173 
 
      c6.267-15.31,15.122-28.49,26.557-39.551c11.427-11.065,24.98-19.558,40.658-25.451c15.673-5.898,32.727-8.85,51.174-8.85 
 
      c18.435,0,33.465,2.858,45.082,8.572c11.617,5.715,20.832,12.353,27.664,19.918c6.816,7.552,11.798,15.113,14.931,22.684 
 
      c0.735,1.773,1.318,3.098,1.942,4.68l0.313,0.078c6.515-3.902,12.951-6.769,20.064-8.994c11.809-3.684,22.875-5.534,33.194-5.534 
 
      c17.343,0,33.566,3.596,48.681,10.788c15.127,7.196,28.308,16.695,39.559,28.491c11.251,11.806,20.104,25.36,26.555,40.66 
 
      c6.454,15.31,9.678,31.073,9.678,47.298c0,18.811-3.129,35.874-9.402,51.17c-6.268,15.309-15.119,28.489-26.559,39.555 
 
      c-11.424,11.065-24.974,19.553-40.658,25.449c-15.67,5.896-32.724,8.848-51.172,8.848c-18.436,0-33.469-2.861-45.084-8.572 
 
      c-11.617-5.711-20.832-12.351-27.663-19.914c-6.816-7.561-11.798-15.12-14.932-22.683 
 
      C402.155,391.527,400.922,388.703,400.922,388.7V300H300z"/> 
 
       <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
      c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
      c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/> 
 
      </svg> 
 
     </div> 
 
     </div>

Je pris le code de [https://stackoverflow.com/questions/29738787/filling-water-animation/29740828#=][1]

[1]: http://wateranimation a essayé de modifier, mais pas de chance jusqu'à présent. Un grand merci à l'avance de l'aide, Neko

Answer 1

Vous avez deux problèmes:

1. Le logo est d'abord dans le fichier SVG, il se cache derrière l'eau bleue. Vous devez le déplacer afin qu'il soit après le chemin de l'eau. Le logo est trop grand par rapport à tout le reste, vous devez donc le mettre à l'échelle et le déplacer un peu pour qu'il soit au bon endroit et à la bonne taille. Pour ce faire, j'ai ajouté une transformation sur le chemin de logo:

   transform="scale(0.3,0.3) translate(30,-30)" 
   

Avec ces changements, vous obtenez un meilleur résultat.

.logo{z-index:1000; 
 
    position: relative;} 
 
    
 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #b7c6ce; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width:300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
     z-index:-1; 
 
    } 
 
    
 
    @keyframes fillAction { 
 
     0% { 
 
      transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
      transform: translate(0, -5px); 
 
     } 
 
    } 
 
    @keyframes waveAction { 
 
     0% { 
 
      transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
      transform: translate(0, 0); 
 
     } 
 
    }

<div id="banner"> 
 
    <div class="fill"> 
 
    <svg width="300px" height="300px" viewBox="0 0 300 300" overflow="visible"> 
 
     <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
      c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
      c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/> 
 
     <path transform="scale(0.3,0.3) translate(30,-30)" 
 
      fill="none" class="logo" stroke="#047F63" stroke-miterlimit="10" d="M200.922,388.703c-6.49,3.878-13.178,6.828-20.265,9.046 
 
      c-11.806,3.683-22.87,5.527-33.191,5.527c-17.342,0-33.564-3.592-48.683-10.784c-15.128-7.188-28.309-16.69-39.554-28.488 
 
      c-11.254-11.812-20.103-25.363-26.556-40.662c-6.452-15.31-9.678-31.074-9.678-47.296c0-18.813,3.128-35.877,9.403-51.173 
 
      c6.267-15.31,15.122-28.49,26.557-39.551c11.427-11.065,24.98-19.558,40.658-25.451c15.673-5.898,32.727-8.85,51.174-8.85 
 
      c18.435,0,33.465,2.858,45.082,8.572c11.617,5.715,20.832,12.353,27.664,19.918c6.816,7.552,11.798,15.113,14.931,22.684 
 
      c0.735,1.773,1.318,3.098,1.942,4.68l0.313,0.078c6.515-3.902,12.951-6.769,20.064-8.994c11.809-3.684,22.875-5.534,33.194-5.534 
 
      c17.343,0,33.566,3.596,48.681,10.788c15.127,7.196,28.308,16.695,39.559,28.491c11.251,11.806,20.104,25.36,26.555,40.66 
 
      c6.454,15.31,9.678,31.073,9.678,47.298c0,18.811-3.129,35.874-9.402,51.17c-6.268,15.309-15.119,28.489-26.559,39.555 
 
      c-11.424,11.065-24.974,19.553-40.658,25.449c-15.67,5.896-32.724,8.848-51.172,8.848c-18.436,0-33.469-2.861-45.084-8.572 
 
      c-11.617-5.711-20.832-12.351-27.663-19.914c-6.816-7.561-11.798-15.12-14.932-22.683 
 
      C402.155,391.527,400.922,388.703,400.922,388.7V300H300z"/> 
 
    </svg> 
 
    </div> 
 
</div>