Zur Startseite - about-svg.de
  Theorie I
  Pfadanimation
  Farbanimation
  Transformation
  Filteranimation
   
   
   
   

 

 

 

Pfadanimation

 

Mit <animateMotion> kann man einem Objekt einen bestimmten Pfad zuweisen, an dem es sich während seiner Bewegung orientiert. Unabhängig von Zeit und Geschwindigkeit kann auch die Ausrichtung des Körpers an Kurven zugeteilt werden.

Optional kann die Animationsdauer auch angegeben werden, sowie die Wiederholungen. Man kann den Pfad auch vorher definieren und mit <mpath> beliebig weiterverwenden.

 

Beispiel:

 

 


Quellcode:
 
   
 

<path id="Pfad" d="M50,100 C50,50 125,50 125,100 S200,150 200,100" style="fill:orange; stroke:black; stroke-width:3; stroke-linecap: round" />

<circle cx="-10" y="-2.5" r="5" fill="yellow" stroke="white">
<animateMotion id="kreis_ani" dur="5s" repaetCount="indefinite" begin="play.click" end="stop.click" rotate="auto">
<mpath xlink:href="#Pfad" />
</animateMotion>
</circle>


  nach oben 

 
 
  Zum Leipzig-Entertainer (SVG)  
     
  Zum Campusplan (SVG)  
     
  Zum SVG-Tutorial (SVG)  
     
  Zum Wankelmotor (SVG)