Zur Startseite - about-svg.de
  Theorie I
  Theoerie II
  Formen
  Linien
  Farben
  Text
   
   
   

 

 

 

Farben und Muster

 

Der radiale Farbverlauf erstellt einen Übergang mittels eines Kreises. Der Startpunkt beginnt ohne vorherige Definition im Mittelpunkt nach außen.

 

Ein linearer Farbverlauf beginnt ohne vorherige Definition immer links und endet rechts im Objekt, dabei kann der Verlauf aber auch schräg definiert werden.

 
Vektorprogramme bieten die Option der Musterfüllung, was auch SVG möglich macht. Dabei kann man zwischen der Musterfüllung mit Rastergrafiken (PNG, JPG, GIF etc.) oder eigens in SVG erstellten Mustern, wählen.

Beispiel 1:

 

 

 


Quellcode 1:
 
   
 

<radialGradient id="IDradial">
<stop offset="10%" style="stop-color:orange"/>
<stop offset="70%" style="stop-color:black"/>
<stop offset="90%" style="stop-opacity: .6"/>
</radialGradient>

<circle cx="50" cy="80" r="35" style="fill: url(#IDradial)"/>


  nach oben 

Beispiel 2:
 

 

 

Quellcode 2:
 
   
 


<linearGradient id="IDlinear">
<stop offset="10%" style="stop-color:red"/>
<stop offset="100%" style="stop-color:white"/>
<stop offset="90%" style="stop-opacity: .2"/>
</linearGradient>

<rect x="10" y="0" width="100" height="60" rx="5" ry="6" style="fill: url(#IDlinear)" stroke="black"/>


  nach oben 

Beispiel 3:
 

 

 

Quellcode 3:
 
   
 

<pattern id="IDpattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="-20 -20 40 40">
<path d="M23,0L32,-10C-18,-20 0,-23 0,-10C12,-23 18,-20 40,-10z" fill="red" />
</pattern>

<ellipse cx="55" cy="30" rx="62" ry="42" fill="lightblue" stroke="black"/>
<ellipse cx="55" cy="30" rx="60" ry="40" style="fill:url(#IDpattern)"/>


  nach oben 

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