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

 

 

 

Transformation und Animation

 

<animateColor> lässt ausschließlich nur Attribute wie fill, stoke, flood-color, lightning-color und color zu.

Zwar ist diese Animationsart recht klein definiert, lässt aber anhand des ziemlich breiten Farbspektrums von SVG einen hohen Phantasiespielraum zu.

 

Beispiel 1:

 

 

 


Quellcode:
 
   
 

<ellipse cx="100" cy="150" rx="40" ry="40" fill="green" stroke="black" stroke-width="2">
<animate attributeName="rx" to="90" dur="2s" repeatCount="indefinite" begin="play2.click" end="stop2.click"/>
</ellipse>

 

  nach oben 

Beispiel 2:
 

 

 

Quellcode:
 
   
 

<text x="40" y="160" style="font-size:30; font-family:Tahoma; fill:yellow; font-weight:bold">
Rotation
<animateTransform attributeName="transform" type="rotate" from="0 170 170" to="360 172 172"
begin="play2.click" end="stop2.click" dur="4s" repeatCount="indefinite"/>
</text>

 

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