SVG CSS animations multiples

9

J'ai créé une animation de carte au trésor, tout d'abord, elle affichera le chemin en gris clair mais au fur et à mesure que l'animation commence, j'aimerais que les tirets gris clair disparaissent ou prennent une couleur noire lorsque l'animation de remplissage ".road" entre en jeu. Je suis du mal à faire disparaître les tirets gris clair ".steps" lorsque les animations de remplissage dépassent cette position.

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.road {
  stroke-dasharray: 744;
  stroke-dashoffset: -744;
  animation: draw-road 10s infinite;
}

.steps {
  stroke-dasharray: -744;
  stroke-dashoffset: 744;
  animation: draw-steps 10s reverse;
}

@keyframes draw-road {
  0% {
    stroke-dashoffset: 744;
    stroke: #000000;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #000000;
  }
}

@keyframes draw-steps {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <style>
        .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
      </style>
      <g id="Layer_1">
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" class="road" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073"/>
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073" class="steps"/>
        <path class="st0" d="M273.84 65.49c1.64-.16 3.3-.32 4.98-.48"/>
        <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
      </g>
    </svg>
Développer l'extrait

css svg saiyan101
la source
1
Déplacez le chemin class="road"à la fin du groupe.
enxaneta

Réponses:

4

Solution utilisant CSS

svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
} 

.road{
  fill:none;
  stroke:black;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
}
.steps{
   fill:none;
   stroke:#999;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
  mask:url(#msk1);
      }


#stepMask{
   fill:none;
   stroke:black;
   stroke-width:2;
   stroke-dashoffset: 744;
   stroke-dasharray:744,744;
   animation: draw-steps 10s linear infinite;
}
@keyframes draw-steps {
100% {stroke-dashoffset:0;}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <style>
    .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
  </style>
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
			  
	   </mask>
	</defs>
  <g id="Layer_1">
     <path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
     <path class="steps"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
   <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
  </g>
</svg>
Développer l'extrait

Solution utilisant un masque SVG.

  • Ci-dessous une ligne noire class="road"
  • Ci-dessus est une ligne grise class="steps"
  • Un masque est appliqué sur la ligne grise qui, lors du déplacement, efface la ligne grise montrant la ligne noire

Cela crée l'effet de remplir la ligne grise de noir

Afficher l'extrait de code

Alexandr_TT
la source
2

Animation de chercheur de trésor sur la route

entrez la description de l'image ici

L'auteur voudra probablement ajouter une carte ou un paysage sous le parcours de la chasse au trésor. Pour que l'itinéraire et l'image soient adaptatifs et que la disposition ne soit pas violée lors du changement de la résolution d'écran, vous devez ajouter l'image dans SVG

<image xlink:href="https://i.stack.imgur.com/ncK6A.jpg" width="100%" height="100%" />

J'ai ajouté une figure animée d'un homme marchant le long de la route 

<use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:#990E0E; fill:black;"> 
    <animateMotion id="an2"
      begin="0s"
      dur="40s"
      repeatCount="indefinite"  >
         <mpath xlink:href="#steps"/>
    </animateMotion>    

   </use>

La coordination de l'animation de la coloration de la route et de l'animation du mouvement humain est réalisée par la même durée des deux animations. 

.container {
 width:100%;
  height:100%;
}
svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
 
} 

.road{
  fill:none;
  stroke:blue;
  stroke-dasharray:12 10;
  stroke-dashoffset:0;
  stroke-width:3;
}
#steps{
   fill:none;
   stroke:white;
  stroke-dasharray:12 10;
  stroke-dashoffset:0;
  stroke-width:3;
   
}

#stepMask{
   fill:none;
   stroke:black;
   stroke-width:3;
   stroke-dashoffset: 1887;
   stroke-dasharray:1887,1887;
 
  
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1200 890" >
  
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" >
		   <animate attributeName="stroke-dashoffset" begin="0s" dur="40s" values="1887;0" repeatCount="1" fill="freeze"/> 
		  </path> 
	   </mask> 
	    <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0s"
          dur="0.4s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
	  </g> 
	</defs> 
	 <image xlink:href="https://i.stack.imgur.com/Gmr13.jpg"
	 width="100%" height="100%" />
  <g id="Layer_1">
   
   <path class="road" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
   <path id="steps" mask="url(#msk1)" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
   
  
  </g>  
  
    <use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an2"
       begin="0s"
       dur="40s"
       repeatCount="1"  >
          <mpath xlink:href="#steps"/>
     </animateMotion>	 

	</use>	
</svg>
</div>
Développer l'extrait

Alexandr_TT
la source