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

 

 

 

Linien und Pfade

 

Eine Linie lässt sich einfach beschreiben. Man benötigt jeweils einen horizontalen und vertikalen Anfangs- und Endpunkt. Polylinien dagegen sind etwas aufwendiger. Sie bestehen aus einer Auflistung von absoluten Koordinaten. Die erste Koordinate wird bis zur nächsten Koordinate gezeichnet. Die Menge an Koordinaten ist unbegrenzt und die Koordinaten selbst werden mit dem Attribut pionts ausgezeichnet. Ein Pfad beginnt mit path und die Punkte werden mit d ausgezeichnet. Buchstaben wie M, Z, L oder C beschreiben die Eigenschaften der einzelnen Linien zueinander. Beispielsweise beschreibt M den Anfangspunkt, Z die geschlossene Form und C eine Bezierkurve.


Beispiel 1:

 

 

 


Quellcode 1:
 
   
 

<line x1="20" y1="50" x2="95" y2="50" style="stroke: #000; stroke-width: 4px"/>

<line x1="20" y1="80" x2="95" y2="105" style="stroke: #FF8C00; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 2%, 1%"/>

<path id="Pfad" d="M50,100 C50,50 125,50 125,100 S200,150 200,100" style="fill:none; stroke:#990000; stroke-width:3; stroke-linecap: round" />

 

  nach oben 

Beispiel 2:
 

 

 

Quellcode 2:
 
   
 

<polyline stroke="yellow" fill="none" stroke-width="3px"
points=" 70,400 150,350 180,370 180,350 200,350 200,380
235,400 235,470 70,470 70,400" />

<path d="M250,190 A80 60 10 1 3 100 200" style="fill:none; stroke:#000000; stroke-width: 4"/>


  nach oben 

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