SVG CSS Mehrere Animationen

9

Ich habe eine Schatzkartenanimation erstellt. Zuerst wird der Pfad in Hellgrau angezeigt. Zu Beginn der Animation möchte ich jedoch, dass die hellgrauen Striche verschwinden oder sich in eine schwarze Farbe verwandeln, wenn die Füllanimation ".road" aktiviert wird Probleme damit, dass die hellgrauen Striche ".steps" verschwinden, wenn die Füllanimationen über diese Position gehen.

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>
Erweitern Sie das Snippet

css svg saiyan101
quelle
1
Verschieben Sie den Pfad class="road"am Ende der Gruppe.
Enxaneta

Antworten:

4

Lösung mit 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>
Erweitern Sie das Snippet

Lösung mit SVG-Maske.

  • Unten ist eine schwarze Linie class="road"
  • Oben ist eine graue Linie class="steps"
  • Auf die graue Linie wird eine Maske angewendet, die beim Verschieben die graue Linie mit der schwarzen Linie löscht

Dadurch wird die graue Linie mit Schwarz gefüllt

Code-Snippet anzeigen

Alexandr_TT
quelle
2

Schatzsucheranimation auf der Straße

Geben Sie hier die Bildbeschreibung ein

Der Autor wird wahrscheinlich eine Karte oder Landschaft unterhalb der Schatzsuchroute hinzufügen wollen. Damit die Route und das Bild anpassungsfähig sind und das Layout beim Ändern der Bildschirmauflösung nicht verletzt wird, müssen Sie das Bild in SVG hinzufügen

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

Ich fügte eine animierte Figur eines Mannes hinzu, der die Straße entlang ging 

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

Die Koordination der Straßenfarbanimation und der menschlichen Bewegungsanimation wird durch die gleiche Zeitdauer beider Animationen erreicht. 

.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>
Erweitern Sie das Snippet

Alexandr_TT
quelle