Zur Startseite - about-svg.de
  Theorie I
  ClipPath
  feTurbulence
  feDisplacement
  feGaussianBlur
   
   
   
   

 

 

 

feDisplacement

 

Bei diesem grafische Efekt werden zwei Bilder miteinander verrechnet. Dabei kann man noch festlegen welches Bild wieviel Prozent oder Pixel beherrschen soll.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<filter id="dismap" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220">
<feImage xlink:href="stadt.png" result="b1"/>
<feImage xlink:href="button5.png" result="b2"/>
<feDisplacementMap in="b2" in2="b1" scale="80" xChannelSelector="R" yChannelSelector="B"/>
</filter>

<rect x="20" y="70" width="200" height="220" style="filter: url(#dismap)"/>

 

  nach oben 

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