CSS SVG Várias animações

9

Eu criei uma animação de mapa do tesouro. Primeiro, ela exibirá o caminho em cinza claro, mas, quando a animação começar, eu gostaria que os traços em cinza claro desaparecessem ou passassem para uma cor preta quando a animação de preenchimento ".road" começar. lutando para fazer com que os traços cinza claro ".steps" desapareçam à medida que as animações de preenchimento ultrapassam essa posição.

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>
Expandir snippet

css svg saiyan101
fonte
11
Mova o caminho class="road"no final do grupo.
enxaneta 19/01

Respostas:

4

Solução usando 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>
Expandir snippet

Solução usando máscara SVG.

  • Abaixo está uma linha preta class="road"
  • Acima está uma linha cinza class="steps"
  • Uma máscara é aplicada à linha cinza que, ao se mover, apaga a linha cinza mostrando a linha preta

Isso cria o efeito de preencher a linha cinza com preto

Mostrar snippet de código

Alexandr_TT
fonte
2

Animação de caçador de tesouros na estrada

insira a descrição da imagem aqui

O autor provavelmente desejará adicionar um mapa ou paisagem abaixo da rota de caça ao tesouro. Para que a rota e a imagem sejam adaptáveis ​​e o layout não seja violado ao alterar a resolução da tela, você precisa adicionar a imagem dentro do SVG

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

Adicionei a figura animada de um homem caminhando pela estrada 

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

A coordenação da animação da coloração da estrada e da animação do movimento humano é alcançada ao mesmo tempo, durante as duas animações. 

.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>
Expandir snippet

Alexandr_TT
fonte