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

 

 

 

Farbanimation

 

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

<linearGradient id="gradient1" gradientUnits="objectBoundingBox">
<stop offset="10%" stop-color="yellow">
<animateColor attributeName="stop-color" begin="play.click" dur="5s" end="stop.click" values="orange;red;green" repeatCount="indefinite" />
</stop>
<stop offset="90%" stop-color="blue">
<animateColor attributeName="stop-color" begin="play.click" dur="5s" end="stop.click" values="blue;green;grey" repeatCount="indefinite" />
</stop>
</linearGradient>

<rect x="22" y="50" width="100" height="50" fill="url(#gradient1)" stroke="black"/>

 

  nach oben 

Beispiel 2:
 

 

 

Quellcode:
 
   
 

<rect x="45" y="200" width="215" height="50" fill="grey" stroke="black" rx="5" ry="5" />

<circle cx="75" cy="225" r="20" fill="yellow">
<animateColor attributeName="fill" dur="1s" begin="play.click" end="stop.click" values="blue;green;red;orange" repeatCount="indefinite"/>
</circle>

<circle cx="125" cy="225" r="20" fill="green">
<animateColor attributeName="fill" dur="1s" begin="play.click" end="stop.click" values="orange;blue;red;green" repeatCount="indefinite"/>
</circle>

<circle cx="175" cy="225" r="20" fill="blue">
<animateColor attributeName="fill" dur="1s" begin="play.click" end="stop.click" values="green;orange;red;blue" repeatCount="indefinite"/>
</circle>

<circle cx="225" cy="225" r="20" fill="white">
<animateColor attributeName="fill" dur="1s" begin="play.click" end="stop.click" values="red;green;orange;blue" repeatCount="indefinite"/>
</circle>

 

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