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

SVG Tutorial

  svg tutorial index  |  Kapitel 10   

10.2 L und l H und h V und v - die lineto Anweisungen

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 xmlns="http://www.w3.org/2000/svg" width="220" height="220"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>lineto</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana; font-size:12px; fill:black;}
      path {fill:none; stroke:saddlebrown; stroke-width:2px;}
    ]]>
    </style>
  </defs>

  <path d="M 20,190
           v -90
           l 80,-80
           l 80,80
           h -160
           l 160,80
           h -160
           l 160,-80
           v 70" />

  <circle cx="20" cy="190" r="3" />
  <text x="25" y="202">Start</text>
  <circle cx="180" cy="170" r="3" />
  <text x="185" y="167">Ende</text>
  <circle cx="20" cy="136" r="9" fill="saddlebrown" />
  <text x="16.5" y="140" style="fill:white;">1</text>
  <circle cx="64" cy="56" r="9" fill="saddlebrown" />
  <text x="60" y="60" style="fill:white;">2</text>
  <circle cx="136" cy="56" r="9" fill="saddlebrown" />
  <text x="132" y="60" style="fill:white;">3</text>
  <circle cx="104" cy="100" r="9" fill="saddlebrown" />
  <text x="100" y="104" style="fill:white;">4</text>
  <circle cx="64" cy="120" r="9" fill="saddlebrown" />
  <text x="60" y="124" style="fill:white;">5</text>
  <circle cx="104" cy="180" r="9" fill="saddlebrown" />
  <text x="100" y="184" style="fill:white;">6</text>
  <circle cx="64" cy="158" r="9" fill="saddlebrown" />
  <text x="60" y="162.5" style="fill:white;">7</text>
  <circle cx="180" cy="136" r="9" fill="saddlebrown" />
  <text x="176" y="140" style="fill:white;">8</text>
</svg>
      

SVG stellt 3 unterschiedliche lineto-Anweisungen zu Verfügung:

  • L oder l - erzeugt eine beliebige gerade Linie
  • V oder v - erzeugt eine beliebige vertikale gerade Linie
  • H oder h - erzeugt eine beliebige horizontale gerade Linie

Wie für alle Pfadanweisung gilt auch hier:
Großbuchstaben für absolute Angaben, Kleinbuchstaben für relative Angaben.

Die lineto-Anweisung L oder l erwartet die nachfolgende Angabe eines Koordinatenpunkts.
Der user agent zeichnet dann eine gerade Linie vom vorherigen Punkt des Pfades zu dem in der lineto-Anweisung angegebenen Koordinatenpunkt.

Die lineto-Anweisung V oder v zeichnet eine vertikale Linie.
Nachfolgend muß daher nur die y-Koordinate angegeben werden.
Die lineto-Anweisung H oder h zeichnet eine horizontale Linie.
Nachfolgend muß daher nur die x-Koordinate angegeben werden.

Aber natürlich ist es ebenso möglich vertikale oder horizontale Linien mit der lineto-Anweisung L oder l zu erzeugen. Bei relativen Angaben genügt es, entweder die x- oder die y-Koordinate mit dem Wert 0 festzulegen. Bei absoluten Angaben muß der vorherige Wert der x- oder y-Koordinate verwendet werden.

Im obigen Beispiel wird mit 8 relativen lineto-Anweisungen das "Haus vom Nikolaus" gezeichnet.
Eine schöne Übung: das Häuschen mal mit absoluten Angaben zu erzeugen ...




index  |  Kapitel 10  |  10.1  <<  | 10.2 |  >>  10.3   Z und z - die closepath Anweisung