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