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

 

 

 

Vordefinierte Formen in SVG

 

Vordefinierte Formen (Rechteck, Kreis, Ellipse) sind Grundelemente von SVG, deren einzelne Definition dem Ersteller überlassen werden. Das Rechteck besitzt Eigenschaften wie Position, Breite und Höhe, Füllung, Abrundung der Ecken, Umriss, Opazität, die beliebig angewendet werden können. Diese Eigenschaften gelten auch für alle anderen vordefinierten Formen. Beim Kreis wird zusätzlich noch der Radius angegeben und bei der Ellipse werden Breite des horizontalen und des vertikalen Radius angeführt.


Beispiel 1:

 

 

 


Quellcode 1:
 
   
 

<rect x="10" y="-20" width="100" height="40" rx="5" ry="5" style="fill: #009946; stroke: #fff; stroke-dasharray: 8; stroke-width: 1px"/>

<rect x="10" y="40" width="40" height="40" rx="5" ry="5" fill="url(#IDradial)"/>

<!-- Im Definitionsabschnitt definierter Verlauf -->

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

 

  nach oben 

Beispiel 2:
 

 

 

Quellcode 2:
 
   
 

<circle cx="20" cy="30" r="30" style="fill: #006699; stroke:#ffffff"/>

<circle cx="120" cy="30" r="10" style="fill: #fff; stroke:#990000; stroke-width: 8"/>

<circle cx="120" cy="30" r="40" style="fill: none; stroke:#000; stroke-dasharray: 8 5; stroke-width: 2"/>

 

  nach oben 

Beispiel 3:
 

 

 

Quellcode 3:
 
   
 

<ellipse cx="35" cy="40" rx="40" ry="15" style="fill: #552658; stroke:#a9a9a9"/>
<ellipse cx="135" cy="40" rx="40" ry="15" style="fill: #552658; stroke:#a9a9a9"/>

<ellipse cx="85" cy="15" rx="10" ry="25" style="fill: #ff9900; stroke:#000"/>
<ellipse cx="85" cy="65" rx="10" ry="15" style="fill: #552658; stroke:#a9a9a9"/>

<ellipse cx="85" cy="40" rx="20" ry="20" style="fill: #990000; stroke:#fff" opacity="0.5"/>

 

  nach oben 

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