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

 

 

 

Filteranimationen

 

Die gegebenen Möglichkeiten zur Filteranimation sind zwar sehr umfangreich und visuell sehr ansprechend, scheitern jedoch an der mangelnden Umsetzung im Viewer, was aber wahrscheinlich nur eine Frage der Zeit ist, bis zur kompletten Umsetzung der Möglichkeiten.

So können derzeit Effekte wie die Simulierung eines fokussierenden Fernglases oder die Bewegung von Lichtquellen erzeugt werden. Auch ein dynamisches Popup-Menü gehört zur Gruppe der Animationen.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<filter id="IDfilter">

<feImage x="40" y="100" width="300" height="250" xlink:href="stadt.png" result="image" />

<feGaussianBlur in="image" stdDeviation="1">

<animate attributeName="stdDeviation" dur="5s" values="1;5;0;3;0" begin="play.click" end="stop.click" fill="freeze" />
</feGaussianBlur>
</filter>

<clipPath id="IDclip" clipPathUnits="userSpaceOnUse">

<circle cx="200" cy="400" r="75">
<animate attributeName="cx" dur="1s" values="100;130;115" begin="play.click" end="stop.click" calcMode="paced" fill="freeze"/>
<animate attributeName="cy" dur="1s" values="200;175" begin="play.click" end="stop.click" calcMode="paced" fill="freeze"/>
</circle>

<circle cx="400" cy="400" r="75">
<animate attributeName="cx" dur="1s" values="210;240;225" fill="freeze" begin="play.click" end="stop.click" calcMode="paced" />
<animate attributeName="cy" dur="1s" values="200;175" fill="freeze" begin="play.click" end="stop.click" calcMode="paced" />
</circle>
</clipPath>

 

  nach oben 

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