Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 4   

4.4 Linien - das line-Element

Eine Linie besteht aus 2 Punkten ;-).
Daher müssen Sie im line-Element mit Hilfe der Attribute x1 und y1 den ersten Koordinatenpunkt (Startpunkt) der Linie und mit Hilfe der Attribute x2 und y2 den zweiten Koordinatenpunkt der Linie (Endpunkt) bestimmen.

Da der Standardwert des Attributes stroke, welches die Linienfarbe eines SVG-Elements festlegt, none ist, muß einer Linie mittels stroke (Attribute oder CSS-Eigenschaft) eine Farbe zugewiesen werden, damit sie dargestellt werden kann.

Füllungen sind für eine Linie logischerweise nicht möglich.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das line-Element</title>
  <desc>nur Linien</desc>
  <!-- schwarze Linien -->
  <line x1="80" y1="160" x2="320" y2="160"
    style="stroke:black; stroke-width:2px;" />
  <line x1="90" y1="150" x2="310" y2="150"
    style="stroke:black; stroke-width:2px;" />
  <line x1="100" y1="140" x2="300" y2="140"
    style="stroke:black; stroke-width:2px;" />
  <line x1="110" y1="130" x2="290" y2="130"
    style="stroke:black; stroke-width:2px;" />
  <line x1="120" y1="120" x2="280" y2="120"
    style="stroke:black; stroke-width:2px;" />
  <line x1="130" y1="110" x2="270" y2="110"
    style="stroke:black; stroke-width:2px;" />
  <line x1="140" y1="100" x2="260" y2="100"
    style="stroke:black; stroke-width:2px;" />
  <line x1="150" y1="90" x2="250" y2="90"
    style="stroke:black; stroke-width:2px;" />
  <line x1="160" y1="80" x2="240" y2="80"
    style="stroke:black; stroke-width:2px;" />
  <line x1="170" y1="70" x2="230" y2="70"
    style="stroke:black; stroke-width:2px;" />
  <line x1="180" y1="60" x2="220" y2="60"
    style="stroke:black; stroke-width:2px;" />
  <line x1="190" y1="50" x2="210" y2="50"
    style="stroke:black; stroke-width:2px;" />

  <!-- rote Linien -->
  <line x1="40" y1="165" x2="180" y2="30"
    style="stroke:red; stroke-width:2px;" />
  <line x1="360" y1="165" x2="220" y2="30"
    style="stroke:red; stroke-width:2px;" />
</svg>
      



index  |  Kapitel 4  |  4.3  <<  | 4.4 |  >>  4.5   Polylinien - das polyline-Element