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="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="200" style="fill:red;" />
<svg x="10" y="10" width="100" height="100">
<rect x="0" y="0" width="100" height="100" style="fill:blue;" />
</svg>
</svg>
Das svg-Element kann weitere svg-Elemente
beinhalten, d.h. Sie können innerhalb einer
Grafik weitere Grafiken definieren. Um diese "internen" Grafiken korrekt zu
platzieren, können sie, zusätzlich zu den Attributen width
und height, die Attribute
x und y verwenden.
Diese legen die x,y-Koordinate der linken, oberen Ecke der inneren Grafik fest.
Im obigen Beispiel wird eine Grafik der Größe 200 x 200 Pixel definiert.
In dieser Grafik ist ein rotes Rechteck derselben Größe definiert, d.h.
es füllt die gesamte Grafik aus.
Weiterhin beinhaltet die Grafik eine zweite, innere Grafik der Größe 100 x 100 Pixel.
Der linke obere Eckpunkt dieser zweiten Grafik ist im Koordinatenpunkt 10,10 der
äußeren Grafik definiert, d.h. sie wird jeweils 10 Pixel vom oberen und vom rechten
Rand der ursprünglichen Grafik dargestellt.
Diese innere Grafik wird durch ein blaues Rechteck ausgefüllt.
Beachten Sie, dass der linke obere Eckpunkt des blauen Rechtecks, mit den
Koordinaten 0,0 bestimmt ist. Dieser Koordinatenpunkt wird relativ zur inneren
Grafik interpretiert. Das blaue Rechteck wird also am Punkt 0,0 der inneren Grafik,
gleichbedeutend mit dem Punkt 10,10 der äußeren Grafik, dargestellt.
Rechtecke sind Thema im Kapitel Grundformen.
|