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

 

 

 

ClipPath

 

Mit ClipPath wird eine Maske erstellt. Die Maske besteht aus zwei Ebenen. Die erste Ebene ist das zu beschneidende Bild (hier die Skyline). Die zweite Ebene ist der Schriftzug CITY, der quasi mit der Skyline gefüllt wird.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<clipPath id="IDclip">
<text x="50" y="250" style="font-family:Impact;
font-size:200;">CITY</text>
</clipPath>

<rect x="15" y="60" width="113" height="75" fill="black"/>

<image xlink:href="stadt.png" x="50" y="20" width="500" height="350"
style="clip-path:url(#IDclip)" />

 

  nach oben 

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